Input types submit and text in Opera, Internet Exporer and Firefox

I see most people that visit this site come here because they have problems styling certain input types. In a previous post I dealt with some of these problems. Unfortunately, that post isn’t written very well if you just happen to look for some quick information. So I’ll give a short summary here.

What I’ve done to create a form with a submit button and a text input that looks more or less the same across Internet Explorer 6, Firefox 1.0+, and Opera:

input {
border: 1px solid #666;
vertical-align: middle;
}

#submitbutton {
height: 22px;
}

#textinput {
padding: 2px;
}

Note1:
If you need a different height you’ll have to adjust the padding too. With a height of 30px for the submit button you’ll need a padding of 6px on the text input to keep them visually the same height.

input {
border: 1px solid #666;
vertical-align: middle;
}

#submitbutton {
height: 30px;
}

#textinput {
padding: 6px;
}

Note 2:
If you want to use a double border, again, you’ll have to use other values. Also, this time a different border width is necessary: at least 3px.

Note 3:
Using “border: 1px solid #666” is a shorter way of using:

input {
border-width: 1px;
border-style: solid;
border-color: #666666;
}