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