To change the background color of an input field we can simply use the background-color property.
The background-color property accepts the color value in various CSS color formats such as a color name, HEX, RGB, HSL, etc. You can choose any of the color formats whichever best suits you.
In the following example, we have selected all text input fields using the attribute selector and changed their background color to cyan:
Example:
input[type="text"]{
background-color: cyan;
padding: 10px 15px;
border-radius: 3px;
}
If you want to change the background color of a specific input field only without affecting the others, you can do it by simply adding a class or id attribute to it.
In the following example, we have changed the background color of a single text input only by specifying an id #coloredInput:
Example:
#coloredInput{
background-color: cyan;
padding: 10px 15px;
border-radius: 3px;
}
