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
Formatted code
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
Formatted code
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
Formatted code
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!