CSS Quickie: Beautify Search Forms

Search forms on most sites lack any styling at all, leaving for the browser's default appearance which can be ugly at times. By simply adding a border to the form in CSS you can easily improve the look. Of course, this also applies to any text input form, not just search boxes.

First you have to find out how to address the particular search form input on your site. You can always style just the "input" selector, but that would affect every input form on your site. For me as well as K2 users, the search form can be addressed with the CSS selector "input#s".

Adding the following CSS lines to that selector is pretty much all you need to do to get rid of most browsers' ugly form styling and replace it with a border of your color choice. The padding makes the form look better by spacing the text out. input#s{      border:1px solid #ccc;      padding:5px; }

Adding on to that, we can change the border color when the user starts using the search form with the focus pseudo-class. input#s:focus{      border:1px solid #38C; }

CSS Quickie: Beautify Search Forms
Top to Bottom: No styling, border not focused, border focused

If you're feeling adventurous, you can go one more step and start using background images to come up with creative solutions. You can also make use of regular hex backgrounds to change it up a bit.

Paul StamatiouPaul Stamatiou

Paul Stamatiou is a designer, developer and photographer living in New York. He has been a product designer at Twitter since 2013. More »

Subscribe Share
Keep reading

Enjoy this article? Tweet it.

"CSS Quickie: Beautify Search Forms" by @Stammy