Just wondering, does anyone here style their inputs quite a lot? I'm trying to fit my inputs in with the design of my page, but not having a lot of luck. I can get it working on 1 out of 3 main browsers that I test it on (IE6, Opera and Firefox) but they all look totally different. They all seem to ignore the height property, IE ignores the border property, and I've got a button next to an input for my search but I can never get the button the same height as the text box....

What does everyone else do?
Are there any tutorials or articles on this?

Hi Minaki,

Well of course you can do border stuff, and change the texts apperance, but you can also add background images in the input boxes. Here is an example of what I mean, http://test.faze1.net, please forgive the site, I was trying to add some color to my design and I guess this attempt went horribly wrong. Anyway check the login box under the logo.

Heres an example of the css:

input.yourclass {
 background: #fff url('yourimage.gif') no-repeat scroll 2px center; 
 border: 1px groove #aaa;
 padding-left: 20px;
 font: 11px Arial, Helvetica, sans-serif; color: #aaa;
 text-align: left;
}

I'm not sure of a tutorial but through goofing around I have found css can effect most form elements the same as any other element.

Have fun,

Save the headache and use an image for the button:

  <INPUT TYPE="image" NAME="submit" src="images/btnSubmit.gif" border="0" alt="Submit">

Rinse and repeat for reset button.

Yeah I think I'm just gonna use an image for the button... at least then I can control what size it is. I'll probably end up writing a different stylesheet for the form elements for each browser...