Customizing Search Button
I need some help / feedback on why the following css code works while in small screen / mobile but doesn't work (transition part) on wider screen / desktop screen. Thank you.
#search_form
{
text-align: right !important;
}
#search_form .input_text
{
background: url(../images/filter.png) no-repeat 2px 4px #fff;
padding-left: 1.6em;
border: 1px solid #7f9db9;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-box-radius: 3px;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
#search_form .input_text:hover
{
border: 1px solid #454545;
width: 25em;
}
#search_form .button_submit
{
position: absolute;
left: -9999px
}