Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Style Input Fields of a form with CSS
CSS provides powerful styling capabilities for form input fields, allowing you to customize their appearance, layout, and user interaction states. You can control properties like width, padding, borders, colors, and focus effects to create attractive and user-friendly forms.
Syntax
input[type="text"] {
property: value;
}
input {
property: value;
}
Example: Basic Input Field Styling
The following example demonstrates how to style input fields with width, padding, and borders −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 16px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
margin-bottom: 15px;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
form {
max-width: 400px;
margin: 20px;
}
</style>
</head>
<body>
<p>Fill the below form:</p>
<form>
<label for="subject">Subject</label>
<input type="text" id="subject" name="sub">
<label for="student">Student</label>
<input type="text" id="student" name="stu">
</form>
</body>
</html>
A form with two styled input fields appears. Each input has padding, rounded corners, gray borders, and takes the full width of the container. Labels are bold and positioned above the inputs.
Example: Enhanced Input with Focus Effects
This example adds hover and focus states for better user interaction −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"], input[type="email"] {
width: 100%;
padding: 12px 16px;
border: 2px solid #e1e1e1;
border-radius: 8px;
font-size: 16px;
margin-bottom: 15px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
input[type="text"]:focus, input[type="email"]:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}
input[type="text"]:hover, input[type="email"]:hover {
border-color: #ccc;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
form {
max-width: 400px;
margin: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</form>
</body>
</html>
A form with enhanced input fields that change border color on hover (light gray) and focus (green with shadow). The inputs include placeholder text and smooth transitions between states.
Conclusion
Styling input fields with CSS enhances form usability and visual appeal. Use properties like padding, borders, and focus states to create professional-looking forms that provide clear visual feedback to users.
Updated on: 2026-03-15T12:32:02+05:30
400 Views
Advertisements