Flash cards
Review the key moves
What is the main idea behind CSS Form Elements?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: 100%;Put the learning moves in the order that makes the concept easiest to apply.
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;
}Live preview
Style a Dropdown Menu
Example
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Live preview
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 */Live preview
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!