CSS Form Input Cross Browser Fun

**Minaki** · 02-16-2005, 10:39 AM

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?

**faze1** · 02-16-2005, 04:36 PM

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:

Code:

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,

**metho** · 02-16-2005, 11:36 PM

Save the headache and use an image for the button:

Code:

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

Rinse and repeat for reset button.

**Minaki** · 02-17-2005, 04:34 AM

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