Style Inputs

Styling Form Input Fields

With CSS, you can style most of the different input types, like text fields, password fields, checkboxes, radio buttons, and file inputs. You can also style input labels and form buttons.

Some commonly used CSS properties for styling input fields, are:

• width

• padding

• margin

• border

• border-radius

• background-color

• color

• font-size

Style Input Width

The width property is used to set the width of an input field.

Tip: The default width of an HTML input text field, is 20 characters.

Here we set the width to 100%:

<label for="fname2">First Name</label> <input type="text" id="fname2" name="firstname" style="width:100%;">

Example

input
{

  width: 100%;

}

The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] - will only select text fields

• input[type=password] - will only select password fields

• input[type=number] - will only select number fields

• etc..

Style Input Padding

The padding property is used to add some space inside the text field.

Tip: When you have several input fields after each other, you might also want to add some margin, to add more space around them:

<label for="fname3">First Name</label> <input type="text" id="fname3" name="firstname" class="inputpadding"> <label for="lname3">Last Name</label> <input type="text" id="lname3" name="lastname" class="inputpadding">

Example

input[type=text]
{

    width: 100%;
  padding: 12px;
  margin: 10px 0;

box-sizing: border-box;

}

Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements. Read more about the box-sizing property in our CSS Box Sizing chapter.

Style Input Border

The border property is used to change the border size and color, and the border-radius property can be used to add rounded corners:

<label for="fname4">First Name</label> <input type="text" id="fname4" name="firstname" class="inputborder">

Example

input[type=text]
{
  border: 2px solid red;

border-radius: 8px;

}

If you only want a bottom border, use the border-bottom property:

<label for="fname7">First Name</label> <input type="text" id="fname7" name="firstname" class="inputborder2">

Example

input[type=text]
{
  border: none;

border-bottom: 1px solid red;

}

Style Input Background Color and Color

The background-color property is used to add a background color to the input, and the color property is used to change the text color:

<input type="text" value="John" name="firstname" class="inputcolor">

Example

input[type=text]
{
  background-color: #3CBC8D;
  color: white;

}