October 2, 2022

How to Change Input Textbox Background Color in HTML and CSS

In this tutorial, we will learn how to change input textbox background color in HTML and CSS. As you know, colors are very important to give a good look and feel to a website.

In most browsers, the default input textbox background color is white. To change this input textbox background color, we have to use the CSS background-color property with a color value. Most commonly, a color name, hexadecimal, and RGB values are used with color property.

In the following example, we will demonstrate how you can change the input textbox background color. Please have a look over the code example and the steps given below.

HTML

We have 3 elements (div, label, and input) in HTML file. The div element is just a wrapper for the rest of the elements.
The label element is used to specify a label for an input field. The value of for attribute is set to the name of the corresponding input field.
In the head element, we have added a stylesheet style.css using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textbox background color change</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name">
    </div>
</body>

</html>

CSS

We are selecting the div element and setting the value of the text-align property to center. This is required to horizontally center align the input field.
To change the input textbox background color, we are selecting the input element and setting the value of the background-color property to green. As a result, it will change the default input textbox background color to green.

div {
    text-align: center;
}

input {
    background-color: green;
}

You May Also Like: