How to Add Background Color in Input and Text Fields using CSS ?
Last Updated :
07 Feb, 2024
In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these elements.
Method 1: Basic CSS Styling
The basic method is used to add a background color to input and text fields is by using the background-color property in CSS.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Add Background Color in
Input and Text Fields Using CSS?
</title>
<style>
input, textarea {
background-color: green;
}
</style>
</head>
<body>
<form>
<label for="name">
Name:
</label>
<input type="text" id="name"
name="name" required><br><br>
<label for="email">
Email Id:
</label>
<input type="email" id="email"
name="email" required><br><br>
<label for="email">
Comment:
</label>
<textarea id="email"
name="email"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
|
Output:
Method 2: Add Background on Hover Effect
To create an interactive experience, you can add a different background color when the user hovers over the input or text field. Utilize the :hover pseudo-class for this effect.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Add Background Color in
Input and Text Fields Using CSS?
</title>
<style>
input:hover, textarea:hover {
background-color: green;
}
</style>
</head>
<body>
<form>
<label for="name">
Name:
</label>
<input type="text" id="name"
name="name" required><br><br>
<label for="email">
Email Id:
</label>
<input type="email" id="email"
name="email" required><br><br>
<label for="email">
Comment:
</label>
<textarea id="email"
name="email"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
|
Output:
Method 3: Add Gradient Background
For a more sophisticated look, you can use gradients as background colors. This example creates a gradient background for input and text fields.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Add Background Color in
Input and Text Fields Using CSS?
</title>
<style>
input, textarea {
background: linear-gradient(to right, #121de9, #016c31);
}
</style>
</head>
<body>
<form>
<label for="name">
Name:
</label>
<input type="text" id="name"
name="name" required><br><br>
<label for="email">
Email Id:
</label>
<input type="email" id="email"
name="email" required><br><br>
<label for="email">
Comment:
</label>
<textarea id="email"
name="email"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...