Styling Form Input Fields
Most input types accept CSS styling, among them text fields, password fields, checkboxes, radio buttons, and file inputs. Input labels and form buttons can be styled too.
The properties you will reach for most often on input fields include width, padding, margin, border, border-radius, background-color, color, and font-size.
Style Input Width
To decide how wide an input field is, set its width property.
Tip: If you leave it alone, an HTML text input is 20 characters wide.
Example
In this example the input field is set to a width of 100%:
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Width</title>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Input Field</h2>
<p>A full-width input field:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Attribute selectors
That rule reaches every <input> element. To target only one input type, switch to attribute selectors instead:
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
If a text field needs some space inside it, padding is the property that adds it.
Tip: When input fields follow one another, a little margin can also give them extra room on the outside.
Example
Note: With box-sizing set to border-box, the padding and any borders count toward the total width and height of the elements. The CSS Box Sizing chapter explains this property in more detail.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Padding</title>
<style>
input[type=text] {
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padded Input Fields</h2>
<p>Padded input fields with margin:</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Style Input Border
Two properties shape the edge of a field: border changes its size and color, and border-radius rounds the corners.
Rounded border
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Border</title>
<style>
input[type=text] {
border: 2px solid red;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Input Border</h2>
<p>A text input with a red border and rounded corners:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Bottom border only
For a border that appears on the bottom edge alone, reach for border-bottom:
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Bottom Border</title>
<style>
input[type=text] {
border: none;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<h2>Input Bottom Border Only</h2>
<p>A text input with only a bottom border:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Style Input Background Color and Color
An input takes its text color from the color property, while background-color adds a color behind it.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Background Color</title>
<style>
input[type=text] {
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input Colors</h2>
<p>A text input with a green background and white text color:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>