CSSForms
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
Thewidth 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 useattribute 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
Thepadding 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 somemargin, to add more space around them:
Example
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
Note that we have set thebox-sizing property toborder-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about thebox-sizing property in ourCSS Box Sizing chapter.
Style Input Border
Theborder property is used to change the border size and color, and theborder-radius property can be used to add rounded corners:
If you only want a bottom border, use theborder-bottom property:
Style Input Background Color and Color
Thebackground-color property is used to add a background color to the input, and thecolor 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 addingoutline: 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 thebackground-image property and position it with thebackground-position property. Also notice that we add a large left padding to reserve the space of the icon:
Example
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Animated Search Input
In this example we use the CSStransition property to animate the width of the search input when it gets focus. You will learn more about thetransition property later, in ourCSS Transitions chapter.
Example
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Style Textarea
By default, a <textarea> can be resized with a "grabber" in the bottom right corner. To remove the grabber, set theresize property tonone:
Example
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Style a Dropdown Menu
Example
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Style Form Buttons
Form buttons of type "button", "submit" and "reset" can also be styled with CSS:
Example
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: usewidth: 100% for full-width buttons */
Tip: For more information about how to style buttons, read ourCSS Buttons Tutorial.
CSS Responsive Form
The following example usesCSS 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 »
