Unable to set Border using pseudo :hover class

Question

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>

Answer 1

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;
}