The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    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