Home » CSS3 應用

[CSS3]用 CSS3 做表單 - 自訂單/多選框樣式(一)

[ 日期： | 瀏覽：34,284 | 迴響：3 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 2,000 元)
沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

表單是做網頁中很常使用到的元素，但預設的樣式都是醜醜很陽春的，筆者今天要教各位快速做出自訂的單/多選框樣式，讓您的表單硬是要跟別人不一樣。

css3-custom-radio-and-checkbox-button-style-0

基本 HTML 就是一個單選框元素加上標籤元素：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
	<h3>性別(單選)</h3>
	<div class="abgne-menu-20140101-1">
	    <input type="radio" id="male" name="sex">
	    <label for="male">男性</label>
 
	    <input type="radio" id="female" name="sex">
	    <label for="female">女性</label>
 
	    <input type="radio" id="other" name="sex">
	    <label for="other">其它</label>
	</div>
</body>

每一個標籤元素中特過 for 屬性來跟單選框元素一一配對，當點擊到標籤元素時，則同時會觸發點擊到相對應的單選框。而我們不想要醜醜的單選框元素，所以筆者先用 CSS 將它隱藏起來。

檢視原始碼 CSS
1
2
3

.abgne-menu-20140101-1 input[type="radio"] {
	display: none;
}

隱藏好之後，接下來就是將標籤元素進行改造一下：

檢視原始碼 CSS
1
2
3
4
5
6

.abgne-menu-20140101-1 input[type="radio"] + label {
	display: inline-block;
	background-color: #ccc;
	cursor: pointer;
	padding: 5px 10px;
}

筆者只是做一些很簡單的樣式設計，同時加上自訂滑鼠遊標為 pointer，讓使用者知道它是可以點擊的。

而比較特別的是 + 這個符號，它是相鄰兄弟選擇器(Adjacent Sibling Selector)。範例中要找的標籤元素是得要跟在單選框元素後的才行，若是改成 #male + label 的話：
css3-custom-radio-and-checkbox-button-style-2

就真的只有在 #male 後的下一個標籤元素才會有效果，其它更後面的兄弟元素則是不會有反應的唷。

好啦~現在若沒問題的話，就會看到基本的樣式出來了：
css3-custom-radio-and-checkbox-button-style-1

最後只要再搭配 :checked 擬類別(Pseudo-classes)就能收工下班啦！

檢視原始碼 CSS
1
2
3
4

.abgne-menu-20140101-1 input[type="radio"]:checked + label {
	background-color: #f00;
	color: #fff;
}

這邊是針對被點選到的單選框元素後的下一個標籤元素進行設定。整個完成後的樣式就變成了：
css3-custom-radio-and-checkbox-button-style-3

而多選框的自訂方式也可以依此類推來設定。

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
	<h3>專長(多選)</h3>
	<div class="abgne-menu-20140101-2">
	    <input type="checkbox" id="jquery" name="skill" checked>
	    <label for="jquery">jQuery</label>
 
	    <input type="checkbox" id="css3" name="skill">
	    <label for="css3">CSS3</label>
 
	    <input type="checkbox" id="html5" name="skill">
	    <label for="html5">HTML5</label>
 
	    <input type="checkbox" id="angularjs" name="skill">
	    <label for="angularjs">AngularJS</label>
	</div>
</body>

CSS 的部份只要將 input[type="radio"] 改成 input["checkbox"] 就可以了

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12

.abgne-menu-20140101-2 input[type="checkbox"] {
	display: none;
}
.abgne-menu-20140101-2 input[type="checkbox"] + label {
	display: inline-block;
	background-color: #ccc;
	cursor: pointer;
	padding: 5px 10px;
}
.abgne-menu-20140101-2 input[type="checkbox"]:checked + label {
	background-color: #f3d42e;
}

是不是很簡單呢~
css3-custom-radio-and-checkbox-button-style-4

各位同學只要將標籤元素再設計的更好看的話，相信就能做出更符合網站特色的單/多選框囉。

See the Pen [CSS3]用 CSS3 做表單 - 自訂單/多選框樣式(一) by abgne.tw (@abgne-tw) on CodePen

最後再提醒一件事，請各位同學將這個範例的原理跟使用方式牢牢的記起來，未來很多的 CSS3 應用效果都會使用到相關的技巧喔！

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

3 筆針對 [CSS3]用 CSS3 做表單 - 自訂單/多選框樣式(一) 的迴響

  1. 老師，請問一下，這個在IE8(含)以下的版本，有解決方法嗎? 因為IE8(含)以下沒辦法正常運作，謝謝!

  2. 您好，我想請問一下
    radiobox項目出現一模一樣的選項，就無法順利點選
    可參閱：http://codepen.io/anon/pen/sHJao

    請問這應該如何解決比較好？
    謝謝老師^^

發表迴響