CSS Lists, Tables & Forms

CSS Input Fields

CSS Input Fields are styled using CSS to improve the appearance and usability of form input elements.

Input fields allow users to enter data such as:

Name
Email
Password
Phone Number
Search Queries

By applying CSS, you can customize input fields with colors, borders, spacing, focus effects, and responsive sizing. The supporting concepts are explained in CSS Form Styling and Modern Form Styling.

Syntax

CSS Input Fields Syntax

css

input {
    property: value;
}

CSS Input Fields Example

css

input {
    border: 1px solid #cccccc;
    padding: 10px;
}

This adds a border and padding to all input fields.

Attributes

Property	Description	Example
width	Sets input width	width: 100%;
padding	Adds inner spacing	padding: 10px;
border	Adds border	border: 1px solid #ccc;
border-radius	Creates rounded corners	border-radius: 5px;
outline	Controls focus outline	outline: none;

Example

CSS Input Fields Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Input Fields Example</title>
    <style>
        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 300px;
            padding: 12px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 16px;
        }
        input:focus {
            border-color: #007acc;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 122, 204, 0.3);
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Enter your name">
        <br>
        <input type="email" placeholder="Enter your email">
        <br>
        <input type="password" placeholder="Enter your password">
    </form>
</body>
</html>

Output

Browser Output

css

Three input fields will appear
Each field will have padding and rounded corners
When a field receives focus, its border color will change to blue
A subtle shadow effect will appear around the active field

Browser Support

Feature	Chrome	Edge	Firefox	Safari
caret-color	57	79	53	11.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Use :focus to style active input fields.
Avoid removing focus indicators completely, as they help accessibility.
width: 100%; is commonly used for responsive forms.
border-radius creates modern-looking inputs.
Consistent input styling improves user experience.

Common Input Types

Input Type	Purpose
text	Single-line text input
email	Email address input
password	Password input
number	Numeric input
search	Search field
tel	Telephone number input

Conclusion

CSS Input Fields allow you to create visually appealing and user-friendly form controls. By styling borders, spacing, focus states, and dimensions, you can improve both the appearance and usability of forms on your website.

PreviousCSS Form Styling NextCSS Shadows