Style Textarea
A small "grabber" in the bottom right corner lets users resize a <textarea> by dragging it, which is the default behavior. Setting the resize property to none removes it.
Example
Prompt
Create an HTML page with a styled textarea. The textarea should be 100% wide, 150px tall, have 12px 20px padding, border-box sizing, a 2px solid #ccc border, 4px border-radius, #f8f8f8 background, and resize set to none.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Textarea</title>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
</style>
</head>
<body>
<h2>Styling Textarea</h2>
<p>Use the resize property to prevent textareas from being resized:</p>
<textarea>Some text...</textarea>
</body>
</html>
Style a Dropdown Menu
Example
Prompt
Create an HTML page with a styled dropdown select menu containing options for Australia, Canada, and USA. The select element should be 100% wide, have 16px 20px padding, no border, 4px border-radius, and a #f1f1f1 background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Dropdown Menu</title>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Styling a Dropdown Menu</h2>
<select>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</body>
</html>
Style Form Buttons
CSS can style form buttons as well, whether their type is "button", "submit", or "reset".
Tip: The CSS Buttons Tutorial goes into more detail on styling buttons.
Example
Prompt
Create an HTML page with three styled form buttons: Submit (type submit), Reset (type reset), and Button (type button). Style all three with a green (#04AA6D) background, no border, white text, 16px 32px padding, no text decoration, 4px 2px margin, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Buttons</title>
<style>
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;
}
</style>
</head>
<body>
<h2>Styling Form Buttons</h2>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button">
</body>
</html>
CSS Responsive Form
A form becomes responsive through CSS media queries. Below a screen width of 600px, labels and input fields no longer sit next to each other and instead stack vertically.
Example
Change the screen size and watch the form layout respond.
Prompt
Create an HTML page with a responsive form that has first name, last name, and country fields with labels beside inputs. Use a media query so that when the screen is less than 600px wide, the labels and inputs stack vertically instead of appearing side by side.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Form</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row::after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>