September 30, 2022

How to Change Input Text Color in HTML and CSS

In this tutorial, we will learn how to change input text color in HTML and CSS. Colors are very important for a good user interface and user experience.

In most browsers, the default input text color is grey/black. To change this text color, we have to use the CSS color property. 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 text color by using the CSS color property. 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>Input text color change</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" placeholder="red text">
    </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 text color, we are selecting the input element and setting the value of the color property to red. As a result, it will change the default input text color to red.

div {
    text-align: center;
}

input {
    color: red;
}

You May Also Like: