CSS: style your form elements

Tweet

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.


I don't think I should explain every single line of code presented in this post. The best way to understand the logic behind the code is to show the result and the CSS rules. Then we can concentrate on changing some values in order to obtain your desired effect.

The white background

The resulting form will be:

Input


TextArea


List Menu
Value 1 Value 2

Button

The code behind it, is the following. For the CSS (to be inserted into the head of your document):

<style type="text/css">
.labelWhite {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
}
.inputWhite {
    background-color:#CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    width: 180px;
    height: 1.5em;
    padding: 2px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #666666;
}
.textareaWhite {
    background-color:#CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    width: 380px;
    padding: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #666666;
}
.selectWhite {
    background-color:#CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #666666;
}
.buttonWhite {
    background-color:#CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #666666;
}
</style>

And the HTML is:

<div style="background-color:#FFFFFF;padding:10px;">
 <form>
  <label class="labelWhite">Input<br>
    <input type="text" name="textfield" class="inputWhite">
  </label>
  <br>
  <br>
  <label class="labelWhite">TextArea<br>
    <textarea name="textarea" rows="5" class="textareaWhite"></textarea>
  </label>
  <br>
  <br>
  <label class="labelWhite">List Menu<br>
    <select name="select" class="selectWhite">
      <option value="Value 1">Value 1</option>
      <option value="Value 2">Value 2</option>
    </select>
  </label>
  <br>
  <br>
  <label class="labelWhite">Button<br>
    <input type="submit" name="Submit" value="Submit" class="buttonWhite">
  </label>
 </form>
</div>

Now... let's see what we can do to change things a bit...

How it works
As you can see, I decided to apply different classes to every form element. That is because we need to have full control on styling applied to every single element avoiding the possibile overlap of CSS rules.

Every form element's font - starting from labels - has been styled, choosing a font family (Geneva), color (#000000 and #333333) and size (14px). The background color of elements is a light grey (#CCCCCC)

We then aligned the text on the left hand side, except for the button which has a centered text.

The input box and the text area have some additional rules (width, height and padding). The resulting effect is to give "more space" to the inside text, so that, when the user insert values, the font is clear and easy to read. - Please note that the height of the input box is in ems and not pixels.

After that, every element has rounded corners: we use the border-radius property to achieve that. I decided to use a quite small value, because I personally don't like it too much rounded (!).

And finally, we style the border which is solid, with a width of 2px and dark grey color (#666666).

Said that, you can understand that we can change all those CSS rules to meet our desired effect.
I believe that the rules I have used are the most important and that working on them is enough. It is clear that we could insert, for instance, a box shadow; however I am sure it would too much in most cases.
Stick to those simple rules, changing values according to the overall theme of your web site, and do not make things too much complicated.

The black background

Just for completeness, I will show a similiar work on a black background.

Input


TextArea


List Menu
Value 1 Value 2

Button

I believe you can guess the CSS rules behind it, don't you? Anyway, here they are:

.labelBlack {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 14px;
}
.inputBlack {
    background-color:#FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    width: 180px;
    height: 1.5em;
    padding: 2px;
    height: auto;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #CCCCCC;
}
.textareaBlack {
    background-color:#FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    width: 380px;
    padding: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #CCCCCC;
}
.selectBlack {
    background-color:#FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: left;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #CCCCCC;
}
.buttonBlack {
    background-color:#FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #CCCCCC;
}

Conclusion

Working on a group of rules like the one above, will surely give you full control on how form elements can be effectively displayed.
I repeat: I don't believe you need anything more.
Just one last note: border radius is not working on Internet Explorer 7 & 8. In those case you might want to use CSS Pie.

That's all for today. Let me know your thoughts.