CSS Lists, Tables & Forms
CSS Form Styling
The CSS Form Styling properties are used to improve the appearance of HTML forms and their elements.
By default, form elements such as text fields, buttons, and textareas have basic browser styling. CSS allows you to customize them to create modern, user-friendly forms. The supporting concepts are explained in Modern Form Styling and CSS User Interface.
Form styling is commonly used for:
- Contact forms
- Login forms
- Registration forms
- Search forms
- Feedback forms
Syntax
CSS Form Styling Syntax
css
selector {
property: value;
}CSS Form Styling Example
css
form {
background-color: #f5f5f5;
padding: 20px;
}This adds a background color and padding to the form.
Attributes
| Property | Description | Example |
|---|---|---|
| width | Sets form width | width: 400px; |
| padding | Adds inner spacing | padding: 20px; |
| border | Adds border | border: 1px solid #ccc; |
| border-radius | Creates rounded corners | border-radius: 5px; |
| background-color | Sets form background color | background-color: #f9f9f9; |
Example
CSS Form Styling Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Form Styling Example</title>
<style>
form {
width: 400px;
padding: 20px;
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cccccc;
border-radius: 4px;
}
button {
background-color: #007acc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #005f99;
}
</style>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name">
<label for="email">Email</label>
<input type="email" id="email">
<label for="message">Message</label>
<textarea id="message"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>Output
Browser Output
css
A styled form with a light background will appear
Input fields will have borders and padding
Labels will appear above each field
The submit button will have a blue background
The button color will darken when hoveredBrowser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| appearance | 84 | 84 | 80 | 15.4 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Use
width: 100%;for responsive form controls. border-radiuscreates modern rounded corners.- Hover effects improve user experience.
- Consistent spacing makes forms easier to use.
- Forms should be designed with accessibility in mind.
Commonly Styled Form Elements
| Element | Purpose |
|---|---|
<form> | Form container |
<input> | User input field |
<textarea> | Multi-line text input |
<select> | Dropdown list |
<button> | Form action button |
Conclusion
CSS Form Styling helps create attractive and user-friendly forms. By customizing spacing, borders, colors, and buttons, you can significantly improve the usability and appearance of forms on your website.