Search Forms And Default Browser CSS

[seansean11]

Hi Everyone,

I am in the process of going from static to wordpress on an old site (www.mamlesip.com). I thought I had my search form styled well until i viewed it in Chrome and the input field showed up as a tiny rounder courner search field. I want to know if there is a reset for search forms so that I don’t have to deal with making browser specific css changes. If there isn’t, are there any articles out there (I can’t find any) about styling search forms for cross-browser compatibility. I noticed the other day that on a friends IPhone my search button on another site dropped down below the search field (www.adechonduras.org). I am somewhat new to web design, so I guess I don’t know what the accepted way of setting up your css in search forms is. Any help is greatly appreciated!

Thanks,

Sean

[seansean11]

Changing the CSS (border-radius, height, width, etc..) values in Firebug Chrome doesn’t seem to change the input field. Any suggestions?

[seansean11]

Search for:

and…

#searchform input#s {
border: medium none;
box-shadow: 0 0 3px #000000 inset;
font-size: 14px;
height: 30px;
left: 0;
padding: 0;
position: absolute;
width: 190px;
}

i just copied and pasted from firebug, so things like -moz-box-shadow, etc… arent added. Thanks for taking a look at my post.

[seansean11]

http://www.mamlesip.com

[seansean11]

I also just checked out the site in IE 8 and it showed up a little off. The button and the search field are different sizes and they have a small space between them. There must be an article or something out there about making your search form cross-browser compatible. I bet there is a somewhat standard way to go about setting up the mark-up and styling…

[Author]

Posts