快速小技巧：簡單的CSS3多選框和單選按钮

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

你是否好奇該如何在不使用JavaScript的前提下為多選框和單選框添加樣式？你要謝謝CSS3！這裡是我們即將要創建的效果的預覽：

如果你想找一些圖片來作為你的UI元素，你可以看看Envato Elements上可供購買的的UI集。或者，你也可以就泡一壺茶然後開始這個教程！

1. 理解整個流程

對於那些你們覺得你的CSS技能很有信心的，並且你僅僅只是想听聽正確方向的，這裡有一條最重要的CSS選擇器來囊括整篇教程：

input[type="checkbox"]:checked + label {

}

現在，對於那些覺得不需要任何指導的人們，別害怕，接著往下讀吧！

好吧，回到我們的話題上。我們究竟要做什麼？嗯，拜CSS3的俏皮的:checked偽選擇器所賜，我們可以指向那些已經被選中的元素（或者未被選中的）。我們然後使用+，來自CSS2.1的相鄰兄弟選擇器來選擇那些直接跟隨這選框的元素，在我們的情況裡就是Label。

2. 設置好我們的HTML

現在，我們將開始創建我們的HTML和CSS文件（或者任何你希望你的樣式表作用的頁面結構）然後開始工作，我會假設你知道如何做這一步，所以我就不提關於這個部分的細節。

由於我只是為你展示基本的原理，並幫你走上正軌，所以我只會用多選框作為例子向你展示技巧，而單選按钮的操作是完全相同的，我也在本文中包含了。

好了，讓我們正式開始好麼？我們首先從創建多選框input開始，後面接一個label。

<input type="checkbox" />
<label>Styled Check Box</label>

現在，假設你並不是很了解元素，你必須鏈接input和label，這樣當你對label進行交互操作的時候<label>才有回饋。這個是使用for=""和input的ID來實現的。

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

我同时會添加一個<span>在label裡面，這僅僅是個人偏好，不過你會在第三步裡面了解的更詳細。

3. 我們為什麼在這裡：CSS

這裡就是有趣的部分開始的地方，首先，作為這篇教程最基礎的地方，就是隱藏原始的多選框。

input[type="checkbox"] {
    display:none;
}

這樣就搞定了，我們可以為label添加樣式，但是更明確的是給在其內部的span添加樣式，我這麼做是因為這樣我可以獲得更多對於位置的控制。如果沒有它（span）的話你可能會直接使用背景圖片在label上，然後當你想改變它的位置的時候可能會變的有點困難。

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

好了，讓我來快速的解釋一下這個，首先，注意背景。由於我有一個小的標誌圖片集，所以我所做的就是背景的位置是直接在span上面的。由於每一個“小精靈”圖標對於span自己有一個絕對的width和height，所以我們在設定屬性的時候就相對簡單一點，永遠跟隨圖片的尺寸走。

這裡是剩下的CSS，是我使用的樣式，這個純粹是為了追求美感而根據我的品位特別設計的樣式。

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. 讓他們工作

接下來就沒什麼工作要做了，所以讓我們來把項目整理一下。最後一件事你會需要做的是提供一條聲明指向input是選中狀態的時候，然後可選的你可以同時設定鼠標滑過，這個相當的簡單，來看下！

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

注意由於我使用了我自己的“小精靈”標誌，所以我僅僅只是改變了背景的位置。注意，同時當選項框選中的時候我也只是給label裡面的span添加了樣式，我使用的是CSS3的:checked偽選擇器。

瀏覽器支持程度的快速筆記

偽選擇器現在已經被各大瀏覽器很好地支持了，但是有時候也還是要告誡開發人員要小心，同時後備機制(fallback)也會非常的優美。

Can I use data for pseudo selectors — 普通的偽選擇器在Can I Use上面的數據

IE9 on Windows 7 — 後備機制：IE9在Windows 7上運行

早年的手機也會成為一個問題 - :checked的支持並不是很明確，舉個例子，手機的Safari在IOS 6之前的版本就不支持它們。

結論

好了，所以我們就完成了，對麼？好吧，讓我們再檢查一遍：首先是HTML：

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

你的看起來也是一樣麼？別忘了添加那個<span>！當你自己用這個做實驗的時候，我非常強烈的建議尋找新的不一樣的方法來完成這一步驟。我很樂意看到你如果能發現更有效率的方式。現在是CSS：

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

所有的內容都在了？非常好，記得，這裡面的很多都是特別為了這個範本教程來創建的，我鼓勵你自己創建屬於你自己的樣式，並且試驗不同的位置和展示形態。

作為結論，最重要的事情是你可以記住我第一行就寫了的CSS語句：

input[type="checkbox"]:checked + label {

}

使用它，你可以創建各種不同的項目，對於:checked的可用性不僅僅體現在多選框和單選按钮中，還可以用於表單等地方，但我會把這部分留給你自己去發掘，你可以嘗試以下的幾個項目：

添加一個適用於視網膜顯示屏的2x尺寸的標誌集
使用SVG來替代數為圖像

我希望你們能喜歡這篇簡短的文章，也希望你們無論從中學到哪些知識都能將它們發揚光大。