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.
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.
border:1px solid #38C;
}
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.
I much prefer the default input field with a little padding.
One thing that always annoys me is that the input tag is used for so many different form elements (textbox, submit, radio, checkbox, file, etc.) based on the type attribute. It makes it much more difficult to style forms. I always want to just do something like:
input {
border: 1px solid #CCC;
}
But doing so changes your submit buttons, checkboxes, etc. Bit PITA.
I usually end up putting some sort of class on text boxes, which is repetitive, or using javascript, which isn’t a great solution either. Can’t wait till CSS3 support is more widespread, then we can do input[type='text'] { }.
Another tip that I’ve found useful — you can get a bit of a 3D effect by using a slightly darker/more saturated color for the top & left borders than the bottom & right ones. Its subtle, but I think it looks a little less flat and boring in a lot of cases.
It’s probably worth nothing that this doesn’t render in Safari.
Simple and great tip! Many developers really need these kind of small tutorials that gives a clue about CSS design that these days applies to “everyone” involved in the web indrusty. [small time frame.. lack of designers e.t.c.]
“It’s probably worth nothing that this doesn’t render in Safari.”
Ah, but it does in the Webkit nightlies. I hope the next official version of Safari is released before Leopard.
oops, I meant to say “noting” — hah, it’s definitely worth something :P
@Paul D — yeah, it’d be cool if Apple adopted some nightly features like CSS 3 and other currently unsupported CSS things
Great tip Paul, thank you :) I’m sure I’ll find some use for this in a future project.
I almost always use a background image for my search inputs, with a border color the same as the outside background for browser consistency.
Also using onfocus / onblur works great too.
that is a really basic tutorial.
That was the point Johan, just a simple Quickie for the CSS beginners.
If you would, please post the html that goes with the CSS.
I’m having a bit of trouble figuring out how to apply this thing.
Thought I might find it with a View Page of this very form, but no such luck!
Thanks.
I have a gif submit button and this wraps it and looks ugly. :(
@Ray - Try adjusting the width of the text field, assuming you only applied the styling to the text field and not the input submit button. Chances are the extra padding + border of the text field was wider than the div containing it, causing it to wrap.
Sorry did a format of my hard drive and forgot about this. Thanks Paul Stamatiou I’ll give that a try.