Loading lesson path
Concept visual
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
Some text...
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Form buttons of type "button", "submit" and "reset" can also be styled with
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 */
For more information about how to style buttons, read our CSS Buttons Tutorial.
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!