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
}
May I ask you the general idea behind the code?
What it should do?
perhaps it could be within a media block? Is this part of a larger file?
Nope. This is just a simple css customization that change the look of search button by removing its submit button, showing filter png in its box and extending its box on hover with 2s ease transition.
Don't see anything wrong with it, and just tried it quickly on my local and it worked fine. I'd say that somewhere else in your css you are over writing it, or you placed it inside a specific media query as live627 suggested.
FWIW you should no longer need browser specific border radius declarations, everything supports normal border radius syntax now. You can also try moving the transition effect to be inside the :hover declaration.
I'm a total nitpicker, but I have two to add to the one by
@Spuds even though I support his notion to get rid of prefixed altogether. :P
The first, unprefixed should go at the end.
Also not that it matters, but -o-box-radius was never a thing. In the first place Opera 10 came out with unprefixed border-radius, just like IE9 did some two years later. Secondly it would be -o-border-radius instead of -o-box-radius even if it existed. ;)
PS I don't know if they still exist, but there used to be some staunch Fx 3.6 lovers out there (i.e., -moz-border-radius).
Okay, on to the actual topic, did you check with "inspect element" to see if any styles are being overridden?
Not that I know of. At least no custom css is using the same id or class. No overriding either. I am testing this on EA1.0 with no luck on the transition (the box is expanding but with no ease transition). I will try on fresh install just to make sure.