Make your forms look pretty with css

this is going to be my first post. and you’ll notice as i go along, my writing style is extremely informal. a lot of hyphens, no capitalization, lots of sentences ending with periods – well, that’s just me….

i’m going to start my first post with some tips on making input boxes and dropdowns look pretty.
at my current workplace, i was asked to work on making all our forms look nice and pretty. web 2.0’ish form elements – big, rounded…

so i started looking to see if i could find nice rounded input boxes and dropdowns that are created using css. i haven’t found a solution for dropdowns yet, but here are a couple that can be used for input boxes.

solution 1. this one does not work in IE, but works across all other browsers.

apply this css to your input box:

input {
border-width: 2px;
border-style: solid;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-size: 1.7em;
outline: none;
border-color:#cccccc;
width:250px;
font-family:Trebuchet MS, Georgia, arial;
}

your input box will end up looking like this –

solution 2: this is the other way you can apply the same effect, and this one will work across all browsers. this uses a background image instead.

input {
background:url(input-bg.gif);
width:455px;
height:40px;
border:0px;
font-size:16px;
background-repeat:no-repeat;
padding:2px 0px 0px 10px;
font-family:Trebuchet MS, Georgia, arial;
}

and here’s the bg image.

input css background

and finally, here’s a way to make your select boxes look pretty and web 2.0’ish using css.

select {
border: 2px solid #cccccc;
padding:6px;
font-family:Trebuchet MS, Georgia, arial;
}

your select box will look like this –