CODEWITHSUNDEEP
htmlcss
Madeyedexter
Madeyedexter

Reputation: 1193

Unable to set Border using pseudo :hover class

I am trying to set border of textbox using css but i am unable to do it. 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 specify no border in inline css and then try to set 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>

Upvotes: 4

Views: 125

Answers (3)

bwoebi
bwoebi

Reputation: 23777

You need to use an !important in your CSS rule:

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

As inline CSS always overwrites non-!important rules.

But I encourage you to not use such a big inline styles and write it into a <style> block or better into an external file as it makes it easier to overwrite 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;
}

Upvotes: 4

user2404546
user2404546

Reputation:

because the inline style is give most importance. 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
  }

Upvotes: 2

Aiias
Aiias

Reputation: 4748

Inline CSS has higher precedence than a stylesheet/style tag precedence. One way to work around this, which is not recommended, is to change your <style> 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 will override any other style definition.

Upvotes: 2

Related Questions