单选框（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的转变；
最后样子见下图：
