Styling Form Fields

This is a tutorial for styling form fields with CSS.

When form fields are styled using an external CSS style sheet, form field styles can be consistent throughout the website. This tutorial was written with that in mind.

The CSS properties and values in the example code are for illustration. You may change them, remove them, and/or add other declarations.

The example CSS declarations scattered about in this tutorial are gathered together into one copyable CSS style sheet near the end of this tutorial.

Declarations for All Form Fields

Let's start off with declarations for all form fields — except type="hidden" fields, being invisible, won't be affected.

input, textarea, select {
   box-sizing:border-box; 
   font-size:1em; 
   }

The above will style every form field that it affects. Here are the reasons for those specific declarations.

1. box-sizing:border-box;

   The box-sizing property with border-box value is declared for consistent sizing when field width is specified.

   Consider that without the declaration, a width:200px; for a type="text" field renders as a slightly different width than the same width specified for a type="submit" field. The reason is default padding and borders can differ from one type of form field to another.

   The box-sizing:border-box; declaration makes the width consistent with other form fields that have the same width value.

2. font-size:1em;

   Some browsers use different default font sizes for different types of form fields. The select field dropdown list, for example, may be rendered in a smaller default font size than the type="text" field.

   The font-size property keeps font sizes consistent from form field to form field.

Now, let's address the various individual form field types.

Declarations for Button Fields

Button fields are either type="submit" or type="button". In this example, it is assumed that button widths shall be 100%.

input[type="submit"], input[type="button"] {
   width:100%; 
   }

Example button field:

Both type="submit" and type="button" are affected by the width property (and any properties you add). Various browsers react differently when button fields are styled with custom borders and padding. If your buttons need to be styled in a certain way, check the result in various browsers, desktop and mobile.

A hint: The technique how-to is out of scope for this tutorial, but I want to mention that if browsers don't allow you to style button fields as you wish, a div with custom styling might be made and given an onclick attribute to submit the form.

Declarations for Text Typing Fields

The textarea field is a box where text can be typed, generally multi-line.

There are a good number of one-line text typing input fields. The CSS below specifies five different input types — text, number, password, tel (for telephone number), and email. Add others as you need them. A page about the types of input fields can be found at the The HTML5 input types page.

A number of CSS declarations can be applied to each of those fields.

textarea, input[type="text"], input[type="number"], input[type="password"], input[type="tel"], input[type="email"] { 
   border:1px solid #ccc; 
   border-radius:.5em; 
   padding:.25em; 0 .25em, .5em; 
   width:100%; 
   }

Example textarea and type="text" fields:

You style these as you please, of course. The above is an example that specifies a rounded border and padding. And a width of 100%;

Declarations for Radio and Checkbox Fields

The two check fields can also be style. Some browsers won't let you change the radio or checkbox size. But you can adjust margins.

input[type="radio"], input[type="checkbox"] { 
   margin:0;
   }

Example radio and checkbox fields:

Declarations for Select Fields

The select field is for both single-selection dropdowns and multiple-selection list boxes.

select { 
   border:1px solid #ccc; 
   border-radius:.5em; 
   width:100%; 
   }

Support for CSS-styled borders and rounded corners for select fields varies by browser. In my quick checks, the CSS had no effect on one browser. On another, the dropdown was styled but not the list box. And on another, the border color was affected for both select fields but no corners were rounded.

Example single-selection dropdown and multiple-selection list box fields (as they appear in your browser):

A width is not required. When it is practical to do so, I personally like to make dropdown lists the same width as the text fields in the form.

Something to be aware of: Browsers running on mobile devices often present selection lists designed different than they would on a desktop or laptop computer.

No Declarations for File Upload Field

The input type="file" form field generally is not style-able. Some older browsers provided a text typing field for the location of the file to upload, then also a button to select one or more files. Later browsers are dropping the text typing part of the field and providing only the button for selecting files.

When they had them, the text typing field of some browsers could be styled. The button generally was not and is not style-able.

Mobile Styles

Style changes for display in mobile devices generally can be done by specifying the style and assigning a maximum width to the style.

Here is an example. When the device screen is less or equal to 450 pixels, then the font-size of textarea and input fields is 1.25em, a bit larger than the 1em specified with earlier examples for wider screens.

@media screen and (max-width:450px) {
   input { 
      font-size:1.25em; 
      }
   }

The @media query CSS rule tells the browser to use certain CSS only if the media query matches the device on which the web page is being viewed. Thus, screen means the device must be a screen (not a printer, for example) and (max-width:450px) means the maximum width of the device is 450 pixels.

All the Styles in This Tutorial

Here is a style sheet with all the styles used as examples in this tutorial.

<style type="text/css">

input, textarea, select {
   box-sizing:border-box; 
   font-size:1em; 
   }

input[type="submit"], input[type="button"] {
   width:100%; 
   }

textarea, input[type="text"], input[type="number"], input[type="password"], input[type="tel"], input[type="email"] { 
   border:1px solid #ccc; 
   border-radius:.5em; 
   padding:.25em; 0 .25em, .5em; 
   width:100%; 
   }

input[type="radio"], input[type="checkbox"] { 
   margin:0;
   }

select { 
   border:1px solid #ccc; 
   border-radius:.5em; 
   width:100%; 
   }

@media screen and (max-width:450px) {
   input { 
      font-size:1.25em; 
      }
   }

</style>

Using the examples in this tutorial as a guide, you are now equipped to style your own form fields.

(This tutorial first appeared with an issue of the Possibilities newsletter.)

Will Bontrager