css3表单控件 |css 最后的

首先，大家先来看下如何样式化一个文本框。通过以下代码，大家可以将文本框的背景颜色变为灰色，边框颜色变为蓝色，当鼠标聚焦在这个文本框时，边框颜色变为红色：

input[type="text"] {
background-color: #e0e0e0;
border: 1px solid #1e90ff;
}
input[type="text"]:hover,
input[type="text"]:focus {
border-color: #ff4500;
}

接下来是如何操作下拉列表（select组件）。通过以下代码，大家可以将下拉列表的背景颜色变为黄色，边框颜色变为蓝色：

select {
background-color: #ffff99;
border: 1px solid #1e90ff;
}

还可以实现更多的样式效果，例如为下拉列表的每一个选项设置不同的背景颜色和颜色。可以通过以下代码实现：

select option:nth-child(2n) {
background-color: #f0f0f0;
}
select option:nth-child(2n+1) {
background-color: #fafafa;
}

下面是单选框和多选框的样式效果。大家可以将它们的边框颜色变为灰色，鼠标放在它们上面时，边框颜色变为蓝色，并且选中时变为红色：

input[type="radio"], input[type="checkbox"] {
border: 1px solid #d0d0d0;
}
input[type="radio"]:hover, input[type="radio"]:focus,
input[type="checkbox"]:hover, input[type="checkbox"]:focus {
border-color: #1e90ff;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
border-color: #f00;
}

简单的几行代码，就可以实现各种表单控件的样式效果。当然，这些只是CSS3表单控件的冰山一角，还有很多的用法等待大家去探索。