CSS Input Fields

Written by Swapnil RajaUpdated 30 Jul 2026

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;
}

PreviousCSS Form Styling NextCSS Shadows

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

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;

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>

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

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

CSS Input Fields

Syntax

Attributes

Example

Output

Browser Output

Browser Support

Notes

Common Input Types

Conclusion