Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)
你是否好奇該如何在不使用JavaScript的前提下為多選框和單選框添加樣式?你要謝謝CSS3!這裡是我們即將要創建的效果的預覽:
如果你想找一些圖片來作為你的UI元素,你可以看看Envato Elements上可供購買的的UI集。或者,你也可以就泡一壺茶然後開始這個教程!

1. 理解整個流程
推薦閱讀:30個你必須記住的CSS選擇器
對於那些你們覺得你的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)也會非常的優美。


早年的手機也會成為一個問題 - :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來替代數為圖像
我希望你們能喜歡這篇簡短的文章,也希望你們無論從中學到哪些知識都能將它們發揚光大。
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post