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.

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 hovered

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

Use width: 100%; for responsive form controls.
border-radius creates 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.

PreviousCSS Tables NextCSS Input Fields