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来实现更加灵活的颜色修改。希望这篇文章对您有所帮助。
以上就是css input颜色改变的详细内容。