css input color change

The Input element in CSS is one of the most frequently used elements in websites. We often see various input boxes in forms, such as text boxes, radio boxes, multi-select boxes, etc. However, the default colors of these elements do not necessarily meet the style requirements of our website, so how to change the color of the Input element? This article will introduce various methods to change the color of Input elements.

1. Modify the color of the Input element through CSS

In CSS, we can use the background-color attribute to set the background color of the Input element, as shown below:

input{

background-color: #cccccc;

}

After setting this, the color of the Input element will become gray. We can also set other properties such as text color, border color, etc. For example:

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

The above code means to set the background color of the Input element to white, the text color to dark gray, and the border color to into black.

2. Modify the focus color of the Input element through CSS

When the user clicks on the Input element, we may also want to modify its color. At this time, you need to use the :focus pseudo-class. For example:

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

After setting this, when the user clicks on the Input element, its background color, text color and border color will change to yellow constant.

3. Modify the hover color of the Input element through CSS

We can also modify the color when the mouse hovers over the Input element through the :hover pseudo-class. For example:

input:hover{

background-color: #f5f5f5;

}

After setting this, when the mouse hovers over the Input element, its background color will turn to light gray.

4. Modify the colors of different types of Input elements through CSS

Different types of Input elements include text boxes, radio boxes, multi-select boxes, buttons, etc. We can use different CSS selectors to select different types of Input elements and then modify their colors. For example:

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

The above code means selecting the Input element of the text box type and setting its background color to white , the text color is set to dark gray and the border color is set to light gray.

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5. Modify the color of the Input element through JavaScript

In addition to CSS, we can also use JavaScript to Dynamically modify the color of the Input element. For example, when a button is clicked, change the background color of the text box to red. You can use the following code to achieve this:

//Get the button element
var btn = document.getElementById("btn");
//Get the text box element
var text = document.getElementById ("text");
//Bind a click event to the button
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

Dynamicly modify the Input element through JavaScript Colors are very flexible, but be aware that they may impact page performance. Therefore, you need to consider carefully when using JavaScript to modify the color of Input elements.

Summary

Through the above methods, we can easily change the color of the Input element. You can set the default color, focus color, hover color, etc. in CSS, or use different CSS selectors to select different types of Input elements. You can also use JavaScript to achieve more flexible color modification. Hope this article is helpful to you.

The above is the detailed content of css input color change. For more information, please follow other related articles on the PHP Chinese website!