Get a free trial // Grow your CSS skills // Land your dream job

Search Forms And Default Browser CSS

  • # February 3, 2012 at 5:19 pm

    Hi Everyone,

    I am in the process of going from static to wordpress on an old site ( 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 ( 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!



    # February 6, 2012 at 10:24 am

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

    # February 6, 2012 at 12:06 pm

    Could you provide the line of markup for the field and the CSS you are applying to it in other browsers, and what you’re trying to apply?

    # February 6, 2012 at 12:23 pm


    #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.

    # February 6, 2012 at 12:24 pm

    # February 6, 2012 at 3:22 pm

    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…

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed