Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

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

by
Length:LongLanguages:

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

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

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

1. 理解整個流程

推薦閱讀30個你必須記住的CSS選擇器

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

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

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

2. 設置好我們的HTML

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

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

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

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

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

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

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

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

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

Our sprite sheet
我們的“小精靈”圖標集

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

4. 讓他們工作

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

注意由於我使用了我自己的“小精靈”標誌,所以我僅僅只是改變了背景的位置。注意,同時當選項框選中的時候我也只是給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:

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

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

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

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

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

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

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.