CSS Form Elements
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 »
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
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Try it Yourself »
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
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 »
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 */
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 » [フレーム]