單選框（radio）自定義樣式
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
//html
<input type=
"radio"
/>
//css部分
<style>
/**
* 單選框自定義樣式
**/
input[type=radio]{
/*去除瀏覽器默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*自定義樣式*/
position: relative;
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
border: 1px solid #00bfff;
outline: none;
cursor: pointer;
/*設置為圓形，看起來是個單選框*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/**
* 單選框 選中之后的樣式
**/
input[type=radio]:after{
content:
''
;
position: absolute;
width: 12px;
height: 12px;
display: block;
left:
0
;
top:
0
;
right:
0
;
bottom:
0
;
margin: auto;
background: #00bfff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-transform: scale(
0
);
-moz-transform: scale(
0
);
transform: scale(
0
);
/*增加一些動畫*/
-webkit-transition : all ease-in-out 300ms;
-moz-transition : all ease-in-out 300ms;
transition : all ease-in-out 300ms;
}
input[type=radio]:checked:after{
-webkit-transform: scale(
1
);
-moz-transform: scale(
1
);
transform: scale(
1
);
}
</style>
|
appearance 屬性介紹
appearance是css3的屬性，他的意思是使得標簽的樣式像他設定的參數一樣；
他總共有7個參數；
normal->> 將元素呈現為常規元素。
icon->> 將元素呈現為圖標（小圖片）。
window->> 將元素呈現為視口。
button->> 將元素呈現為按鈕。
menu->> 將元素呈現為一套供用戶選擇的選項。
field->> 將元素呈現為輸入字段。
none->> 去除瀏覽器默認樣式
:checked偽類介紹
:checked同樣是css3中的一個偽類，他的作用是某個標簽被選中時來使用的，使用方法和:hover :active :link這些偽類一樣；
上面我在radio后面加了一個偽類：after，他要稍微比定義的單選框要小點，這樣顯示出來更加美觀一點，在未選中之前讓他scale(0),然后配合動畫，在選中的時候scale(1)，這樣就有一個漸變填充的動畫了；
那么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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/**
* html代碼
**/
<input type=
"checkbox"
/>
/**
* css代碼
**/
<style>
input[type=checkbox]{
margin: 50px;
/*同樣，首先去除瀏覽器默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*編輯我們自己的樣式*/
position: relative;
width: 20px;
height: 20px;
background: transparent;
border:1px solid #00BFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
outline: none;
cursor: pointer;
}
input[type=checkbox]:after{
content:
'√'
;
position: absolute;
display: block;
width:
100
%;
height:
100
%;
background: #00BFFF;
color: #fff;
text-align: center;
line-height: 18px;
/*增加動畫*/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
/*利用border-radius和opacity達到填充的假象，首先隱藏此元素*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:
0
;
}
input[type=checkbox]:checked:after{
-webkit-border-radius:
0
;
-moz-border-radius:
0
;
border-radius:
0
;
opacity:
1
;
}
</style>
|
寫法和radio思路一致，首先都是去除瀏覽器樣式，然后自定義樣式，這里填充的那種動畫，就是利用漸現和圓弧填充為四個角的這么個思路，其實css還是有很多地方挺有意思的，大家平時多挖掘就會發現了；
最后樣式如下：
再來看一種開關模式的復選框；
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
input[type=checkbox]{
/*同樣，首先去除瀏覽器默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*編輯我們自己的樣式*/
position:
relative
;
background: #fff;
border: 1px solid #00BFFF;
width: 56px;
height: 28px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/*增加動畫*/
-webkit-transition:
all
ease-
in
-
out
300ms;
-moz-transition:
all
ease-
in
-
out
300ms;
transition:
all
ease-
in
-
out
300ms;
outline: none;
cursor
: pointer;
}
input[type=checkbox]:
after
{
content:
'off'
;
position:
absolute
;
left
: 2px;
top
: 2px;
display: block;
width: 22px;
height: 22px;
background: #00BFFF;
color: #fff;
text-align: center;
line-height: 22px;
/*增加動畫*/
-webkit-transition:
all
ease-
in
-
out
300ms;
-moz-transition:
all
ease-
in
-
out
300ms;
transition:
all
ease-
in
-
out
300ms;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-
size
: 12px;
}
input[type=checkbox]:checked{
background: #00BFFF;
}
input[type=checkbox]:checked:
after
{
content:
'on'
;
left
: 30px;
background: #fff;
color: #00BFFF;
}
|
這里就是對上面普通的復選框稍微做了一些改變，首先寬度增大，自身增加一個動畫，不然背景變化沒有漸變；
然后偽元素位置根據選中和未選中來確定left的值和content中的值就是圖中的on與off的轉變；
最后樣子見下圖：
