Home » CSS3 應用

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

範例 1
範例 2
沒錯!只要 1,000 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

用 CSS3 做表單 - 自訂單/多選框樣式(一)中學到將 label 標籤改成帶有單/多選框的功能,而現在則是要教大家如何憑空產生出單/多選框的元素囉。

一樣是一個 radio 元素加一個專屬的 label 元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<h3>性別(單選)</h3>
	<ul class="abgne-menu-20140109-1">
		<li>
			<input type="radio" id="male" name="sex">
	    	<label for="male">我是男生</label>
		</li>
		<li>
			<input type="radio" id="female" name="sex">
	    	<label for="female">我是女生</label>
		</li>
		<li>
			<input type="radio" id="other" name="sex">
	    	<label for="other">我不想說</label>
		</li>
	</ul>
</body>

先進行基本的樣式設計:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.abgne-menu-20140109-1, .abgne-menu-20140109-1 li {
	list-style: none;
	margin: 5px 0;
	padding: 0;
}
.abgne-menu-20140109-1 label {
	cursor: pointer;
	display: block;
	width: 120px;
	position: relative;
	line-height: 31px;
}
.abgne-menu-20140109-1 input[type="radio"] {
	display: none;
}

這些部份在用 CSS3 做表單 - 自訂單/多選框樣式(一)中應該都有學過吧,就只是先把 radio 元素隱藏起來。

接著,筆者要使用 ::after 擬元素(Pseudo-elements)在 lable 元素中產生用來代替單選框樣式的元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
.abgne-menu-20140109-1 label::after {
	content: "No";
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	border-radius: 50%;
	padding: 3px;
	color: #FFF;
	background: #f00;
	text-align: center;
	margin-left: 10px;	/* 跟文字產生距離 */
}

擬元素的內容是透過 content 屬性來指定的,且一樣能用 CSS 來裝置它。
css3-custom-radio-and-checkbox-button-style-2-0

仔細看一下 DevTools 的畫面:
css3-custom-radio-and-checkbox-button-style-2-1

雖然是叫 after,但其實是將元素產生並放置在 label 元素中,所以點擊到該元素也等同點擊到 label 元素。最後快來補上當 radio:checked 時的變化囉:

1
2
3
4
.abgne-menu-20140109-1 input[type="radio"]:checked + label::after {
	content: "Yes";
	background: green;
}

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

如果想要改放在前方時,就改換成使用 ::before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.abgne-menu-20140109-1 label {
	cursor: pointer;
	display: block;
	width: 120px;
	position: relative;
	line-height: 31px;
	padding-left: 40px;	/* 加上距離 */
}
.abgne-menu-20140109-1 label::before {
	content: "No";
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	border-radius: 50%;
	padding: 3px;
	color: #FFF;
	background: #f00;
	text-align: center;
	position: absolute;
	left: 0;
}
.abgne-menu-20140109-1 input[type="radio"]:checked + label::before {
	content: "Yes";
	background: green;
}

其中 lable 元素的 padding-left 是為了跟擬元素產生距離以免靠的太近太擠~
css3-custom-radio-and-checkbox-button-style-2-3

多選框的做法也是一樣,只是將 radio 改成 checkbox 就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.abgne-menu-20140109-2, .abgne-menu-20140109-2 li {
	list-style: none;
	margin: 5px 0;
	padding: 0;
}
.abgne-menu-20140109-2 label {
	cursor: pointer;
	display: block;
	width: 120px;
	position: relative;
	line-height: 31px;
}
.abgne-menu-20140109-2 label::after {
	content: "No";
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	border-radius: 50%;
	padding: 3px;
	color: #FFF;
	background: #f00;
	text-align: center;
	position: absolute;
	right: 0;
}
.abgne-menu-20140109-2 input[type="checkbox"] {
	display: none;
}
.abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after {
	content: "Yes";
	background: green;
}

有沒有覺得 CSS3 真的是很強大咧~
css3-custom-radio-and-checkbox-button-style-2-4

快動力來試試~

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

範例 1 範例 2

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

發表迴響