css中的input元素是网站中使用频率极高的元素之一，我们经常会看到表单中各种不同的输入框，如文本框、单选框、多选框等。但是，这些元素的默认颜色并不一定符合我们网站的风格要求，那么如何改变input元素的颜色呢？本文将介绍多种方法来实现input元素的颜色改变。
一、通过CSS修改Input元素的颜色
在CSS中，我们可以使用background-color属性来设置Input元素的背景色，如下所示：
input{
background-color: #cccccc;
}
立即学习“前端免费学习笔记（深入）”；
这样设置以后，Input元素的颜色就会变成灰色。我们还可以设置其他属性，如文本颜色、边框颜色等。例如：
input{
background-color: #ffffff; color: #333; border: 1px solid #333;
}
立即学习“前端免费学习笔记（深入）”；
以上代码的意思是，将Input元素的背景色设置成白色，文本颜色设置成深灰色，边框颜色设置成黑色。
二、通过CSS修改Input元素的焦点颜色
当用户点击Input元素后，我们也可能要修改其颜色。这时候需要使用:focus伪类。例如：
input:focus{
background-color: #f8e5a1; color: #333; border: 1px solid #333;
}
立即学习“前端免费学习笔记（深入）”；
这样设置以后，当用户点击Input元素时，其背景色会变成黄色，文本颜色和边框颜色不变。
三、通过CSS修改Input元素的hover颜色
我们还可以通过:hover伪类来修改鼠标悬停在Input元素上时的颜色。例如：
input:hover{
background-color: #f5f5f5;
}
立即学习“前端免费学习笔记（深入）”；
这样设置以后，当鼠标悬停在Input元素上方时，其背景色会变成浅灰色。
四、通过CSS修改不同类型的Input元素的颜色
不同类型的Input元素包括文本框、单选框、多选框、按钮等。我们可以使用不同的CSS选择器来选择不同类型的Input元素，然后修改其颜色。例如：
input[type="text"]{
background-color: #ffffff; color: #333; border: 1px solid #ccc;
}
立即学习“前端免费学习笔记（深入）”；
上面的代码表示选择文本框类型的Input元素，将其背景色设置成白色，文本颜色设置成深灰色，边框颜色设置成浅灰色。
input[type="checkbox"]{
/*设置复选框的颜色*/
}
立即学习“前端免费学习笔记（深入）”；
input[type="radio"]{
/*设置单选框的颜色*/
}
立即学习“前端免费学习笔记（深入）”；
input[type="submit"]{
/*设置提交按钮的颜色*/
}
立即学习“前端免费学习笔记（深入）”；
五、通过JavaScript修改Input元素的颜色
除了CSS外，我们还可以使用JavaScript来动态修改Input元素的颜色。例如，在点击按钮时，将文本框的背景色修改成红色。可以使用以下代码实现：
//获取按钮元素
var btn = document.getElementById("btn");
//获取文本框元素
var text = document.getElementById("text");
//给按钮绑定单击事件
btn.onclick = function(){
text.style.backgroundColor = "#ff0000";
}
立即学习“前端免费学习笔记（深入）”；
通过JavaScript动态修改Input元素的颜色非常灵活，但是需要注意的是，可能会影响页面性能。因此，在使用JavaScript修改Input元素的颜色时，需要谨慎考虑。
总结
通过上述几种方法，我们可以轻松地实现Input元素的颜色改变。可以在CSS中设置默认颜色、焦点颜色、hover颜色等，也可以使用不同的CSS选择器来选择不同类型的Input元素。还可以使用JavaScript来实现更加灵活的颜色修改。希望这篇文章对您有所帮助。
