Cannot install Border using hover pseudo-class

Question

I am trying to set the border of a text box using css, but I cannot do this. Here is my code:

<input type="email" id="email" style="display:inline-block;margin-top:10px;width:180px;height:30px;border:1px solid #cccccc;border-radius:1px;padding-left:8;padding-right:8;"> <style> #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border:1px solid #bbbbbb; } </style> 

But when I don't specify the border in inline css and then try to set the border in: hover pseudo class, then it works. Like this:

 <input type="email" id="email" style="display:inline-block;margintop:10px;width:180px;height:30px;border-radius:1px;padding-left:8;padding-right:8;"> <style> #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border:1px solid #bbbbbb; } </style> 

Answer 1

You need to use !important in your CSS rule:

 #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border:1px solid #bbbbbb !important; } 

How inline CSS always rewrites non !important rules.

---

But I recommend you not to use such large built-in styles and write them to a <style> block or better to an external file, as it makes it easier to rewrite your rules without !important :

 #email { display:inline-block; margin-top:10px; width:180px; height:30px; border:1px solid #cccccc; border-radius:1px; padding-left:8; padding-right:8; } #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border:1px solid #bbbbbb; } 

Answer 2

Inline CSS takes precedence over the priority of a style sheet tag. One way around this, which is not recommended, is to change the style of <style> to this:

 <style> #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border: 1px solid #bbbbbb !important; } </style> 

!important override any other style definition.

Answer 3

because inline style gives the greatest value. if you want any other rule to overpower your inline style, use !important

  #email:hover { box-shadow: inset 0 0 4px rgba(192,192,192,0.4); border:1px solid #bbbbbb;!important }