CSS can be used to style the labels, fields, buttons, checkboxes, etc. in an HTML form.

Using CSS, each element of the form can be styled. For instance, in the example below we wrap the entire form in a thin border, make sure that each input falls on its own line by making the width 100%, we are giving each input a set padding and margin, applies a border and border radius, and styles the submit button.

It also changes the border color of an input and textarea when the user clicks into them.

form {
    padding: 8px;
    border: #eaeaea solid thin;
}
input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px 8px;
    margin: 8px;
    display: inline-block;
    border: #bababa solid thin;
    border-radius: 4px;
}
textarea {
    width: 100%;
    height: 80px;
    border: #bababa solid thin;
}
input:focus, textarea:focus {
    border-color: blue;
}
input[type="submit"] {
    background-color: #ff0000;
    border: none;
    color: white;
    padding: 8px 26px;
    text-decoration: none;
    cursor: pointer;
}

This is just an example of a few of the elements that can be styled and a few of the properties typically applied.

Any element in a form, including the form element itself can be styled to give the form an appealing look and to make it easier to use.

For the most part, to style the form elements, you just target the various tags used to make up the form (form, label, input, textarea, select, option, etc.). But the following selectors can be added to style a form element based on the state of the element or things like whether its required, disabled, checked, etc.

• CSS – :checked Selector
  The :checked selector matches every checked input element for radio buttons, checkboxes, and option elements.
• CSS – :default Selector
  The :default selector selects the default form element in a group of related elements, and can only be used on button, input type=”checkbox”, input type=”radio”, and option elements.
• CSS – :disabled Selector
  The :disabled selector matches all disabled form elements.
• CSS – :enabled Selector
  The :enabled selector matches all enabled form elements.
• CSS – :focus Selector
  The :focus selector selects the element that currently has focus.
• CSS – :in-range Selector
  The :in-range selector selects elements with a value that is within a specified range, and only works for input elements with min/max attributes.
• CSS – :indeterminate Selector
  The :indeterminate selector selects form elements that are in an indeterminate state, and can only be used on input type=”checkbox”, input type=”radio”, and progress elements.
• CSS – :invalid Selector
  The :invalid selector selects form elements with a value that does not validate according to the element’s settings.
• CSS – :optional Selector
  The :optional selector selects form elements which are optional (those without the required attribute).
• CSS – :out-of-range Selector
  The :out-of-range selector selects elements with a value that is NOT within a specified range, and only works for input elements with min/max attributes.
• CSS – ::placeholder Selector
  The ::placeholder selector selects form inputs with placeholder text.
• CSS – :read-only Selector
  The :read-only selector selects form inputs which are “readonly” (those with a “readonly” attribute).
• CSS – :read-write Selector
  The :read-write selector selects form inputs which are “readable” and “writeable” (those with no “readonly” or “disabled” attributes).
• CSS – :required Selector
  The :required selector selects form inputs which are required (those with the required attribute).
• CSS – :valid Selector
  The :valid selector selects form inputs with a value that properly validates according to the element’s settings.