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
Add a background color to the form input with CSS
The CSS background-color property is used to add background color to form input elements. This property allows you to customize the appearance of input fields by setting their background to any color value.
Syntax
input {
background-color: value;
}
Possible Values
| Value | Description |
|---|---|
color name |
Predefined color names like red, blue, gray |
hex code |
Hexadecimal values like #FF5733, #000000 |
RGB |
RGB values like rgb(255, 87, 51) |
transparent |
Makes the background transparent |
Example
The following example applies a gray background color to text input fields −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
box-sizing: border-box;
background-color: lightgray;
border: 1px solid #ccc;
border-radius: 4px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<p>Fill the below form:</p>
<form>
<label for="subject">Subject</label>
<input type="text" id="subject" name="sub" placeholder="Enter subject">
<label for="student">Student Name</label>
<input type="text" id="student" name="stu" placeholder="Enter student name">
</form>
</body>
</html>
A form with two text input fields appears. Both input fields have light gray backgrounds with rounded corners and proper spacing. The labels are displayed above each input field in bold text.
Conclusion
The background-color property is essential for styling form inputs. It helps improve visual appeal and user experience by making input fields more noticeable and consistent with your website's design theme.
Updated on: 2026-03-15T12:32:47+05:30
8K+ Views
Advertisements