在前端開發(fā)中，表單是不可缺少的一部分。而CSS3則為表單的樣式提供了更多的操作，讓開發(fā)者可以通過簡單的代碼實(shí)現(xiàn)各種樣式效果。下面就讓我們一起來了解一些CSS3表單控件的用法。

首先，我們先來看下如何樣式化一個(gè)文本框。通過以下代碼，我們可以將文本框的背景顏色變?yōu)榛疑吙蝾伾優(yōu)樗{(lán)色，當(dāng)鼠標(biāo)聚焦在這個(gè)文本框時(shí)，邊框顏色變?yōu)榧t色：

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

接下來是如何操作下拉列表（select組件）。通過以下代碼，我們可以將下拉列表的背景顏色變?yōu)辄S色，邊框顏色變?yōu)樗{(lán)色：

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

還可以實(shí)現(xiàn)更多的樣式效果，例如為下拉列表的每一個(gè)選項(xiàng)設(shè)置不同的背景顏色和顏色。可以通過以下代碼實(shí)現(xiàn)：

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

下面是單選框和多選框的樣式效果。我們可以將它們的邊框顏色變?yōu)榛疑髽?biāo)放在它們上面時(shí)，邊框顏色變?yōu)樗{(lán)色，并且選中時(shí)變?yōu)榧t色：

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;
}

簡單的幾行代碼，就可以實(shí)現(xiàn)各種表單控件的樣式效果。當(dāng)然，這些只是CSS3表單控件的冰山一角，還有很多的用法等待我們?nèi)ヌ剿鳌?/p>