How to Add Background Color in Input and Text Fields using CSS ? - Coding

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

<!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:

input-background-3

Reffered: https://www.geeksforgeeks.org

CSS

Related
CSS History, Versions
How to create Underline Input Text Field using CSS ?
How to change the Font Style in CSS ?
How does the CSS Box-sizing Property control the size of HTML Elements ?
How to Set Width and Height of Span Element using CSS ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13