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:

input-background

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:

input-background-2

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