CSS Form 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:
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%:
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 fieldsinput[type=password]- will only select password fieldsinput[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:
Example
input[type=text]
{
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
Try it Yourself »
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:
If you only want a bottom border, use the
border-bottom property:
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:
