CSS Forms
CSS Styling Forms
CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS:
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:
Style Input with Focus
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding
outline: none; to the input.
Use the :focus selector to do something with the input field when it gets focus:
Style Input with icon/image
If you want an icon inside the input, use the
background-image property and
position it with the
background-position property. Also notice that we
add a
large left padding to reserve the space of the icon:
Example
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Try it Yourself »
Animated Search Input
In this example we use the CSS
transition property to animate
the width of the search input when it gets focus. You will learn more about the
transition property later, in our CSS Transitions chapter.
Example
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Try it Yourself »
Style Textarea
By default, a <textarea> can be resized with a "grabber" in the bottom right
corner. To remove the grabber, set the
resize property to
none:
Example
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Try it Yourself »
Style a Dropdown Menu
Example
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Try it Yourself »
Style Form Buttons
Form buttons of type "button", "submit" and "reset" can also be styled with CSS:
Example
input[type=button], input[type=submit], input[type=reset]
{
background-color: #04AA6D;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Try it Yourself »
Tip: For more information about how to style buttons, read our CSS Buttons Tutorial.
CSS Responsive Form
The following example uses CSS media queries to create a responsive form. You will learn more about media queries in a later chapter.
When the screen is less than 600px wide, we make the labels and input fields stack on top of each other, instead of next to each other.
Resize the screen to see the form layout change!
Try it Yourself »
