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 (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

    # 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

    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.

    # February 6, 2012 at 12:24 pm

    http://www.mamlesip.com

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

*May or may not contain any actual "CSS" or "Tricks".