CSS Styling Forms
HTML forms can look far better once styled, and CSS is the tool for that.
Example
Text inputs for first name and last name sit above a country dropdown in this styled form.
Prompt
Create a styled HTML form with fields for First Name, Last Name, and a Country dropdown (Australia, Canada, USA). Style the text inputs with full width, padding, margin, and border. Style the select dropdown similarly.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styled Form</title>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h2>CSS Forms</h2>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Styling Form Input Fields
Most input types accept CSS styling: fields for text or passwords, checkboxes, radio buttons, and also file inputs. Form buttons and input labels can be styled as well.
Input fields commonly get their look from width, padding and margin, from border and border-radius, and from background-color, color and font-size.