使用CSS3编写类似iOS中的复选框及带开关的按钮

前端  /  管理员 发布于 7年前   300

checkbox多选

最近写了一个适合移动端的checkbox，如图：

ps：中间的勾勾是iconfont，iOS风格的。

具体的HTML：

XML/HTML Code复制内容到剪贴板

1. <div class="mui-checkbox-con">  
2.     <label>  
3.         <input class="mui-checkbox" type="checkbox">默认未选中</label>  
4. </div>  
5. <div class="mui-checkbox-con">  
6.     <label>  
7.         <input class="mui-checkbox" type="checkbox" checked>默认选中</label>  
8. </div>  
9. <div class="mui-checkbox-con">  
10.     <label>  
11.         <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>  
12. </div>  
13. <div class="mui-checkbox-con">  
14.     <label>  
15.         <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>  
16. </div>  
17. <div class="mui-checkbox-con">  
18.     <label>  
19.         <input class="mui-checkbox" type="checkbox" disabled>禁用</label>  
20. </div>  

CSS代码（SCSS导出的，排版有些奇怪）：

CSS Code复制内容到剪贴板

1. .mui-checkbox {   
2.   -webkit-appearance: none;   
3.   position: relative;   
4.   width: 25px;   
5.   height: 25px;   
6.   margin-right: 10px;   
7.   background-color: #FFFFFF;   
8.   border: solid 1px #d9d9d9;   
9.   border-top-left-radius: 20px;   
10.   border-top-rightright-radius: 20px;   
11.   border-bottom-left-radius: 20px;   
12.   border-bottom-rightright-radius: 20px;   
13.   background-clip: padding-box;   
14.   display: inline-block; }   
15.   .mui-checkbox:focus {   
16.     outline: 0 none;   
17.     outline-offset: -2px; }   
18.   .mui-checkbox:checked {   
19.     background-color: #18b4ed;   
20.     border: solid 1px #FFFFFF; }   
21.     .mui-checkbox:checked:before {   
22.       display: inline-block;   
23.       margin-top: 1px;   
24.       margin-left: 2px;   
25.       font-family: iconfont;   
26.       content: "\e667";   
27.       color: #FFFFFF;   
28.       font-size: 18px; }   
29.   .mui-checkbox:disabled {   
30.     background-color: #d9d9d9;   
31.     border: solid 1px #d9d9d9; }   
32.     .mui-checkbox:disabled:before {   
33.       display: inline-block;   
34.       margin-top: 1px;   
35.       margin-left: 2px;   
36.       font-family: iconfont;   
37.       content: "\e667";   
38.       color: #FFFFFF;   
39.       font-size: 18px; }   
40.   .mui-checkbox.checkbox-green:checked {   
41.     background-color: #5cb85c; }   
42.   .mui-checkbox.checkbox-orange:checked {   
43.     background-color: #f0ad4e; }   
44.   .mui-checkbox.checkbox-s {   
45.     width: 19px;   
46.     height: 19px; }   
47.     .mui-checkbox.checkbox-s:before {   
48.       display: inline-block;   
49.       margin-top: 1px;   
50.       margin-left: 2px;   
51.       font-family: iconfont;   
52.       content: "\e667";   
53.       color: #FFFFFF;   
54.       font-size: 13px; }   
55.     
56. .mui-checkbox-anim {   
57.   -webkit-transition: background-color ease 0.2s;   
58.           transition: background-color ease 0.2s; }  

SCSS代码：

CSS Code复制内容到剪贴板

1. @mixin checkedCon($fs:18px) {   
2.   &:before {   
3.     display: inline-block;   
4.     margin-top: 1px;   
5.     margin-left: 2px;   
6.     font-family: iconfont;   
7.     content: "\e667";   
8.     color: #FFFFFF;   
9.     font-size: $fs;   
10.   }   
11. }   
12. $duration: .4s;   
13. .mui-checkbox {   
14.   -webkit-appearance: none;   
15.   position: relative;   
16.   width: 25px;   
17.   height: 25px;   
18.   margin-right: 10px;   
19.   background-color: #FFFFFF;   
20.   border: solid 1px #d9d9d9;   
21.   border-top-left-radius: 20px;   
22.   border-top-rightright-radius: 20px;   
23.   border-bottom-left-radius: 20px;   
24.   border-bottom-rightright-radius: 20px;   
25.   background-clip: padding-box;   
26.   display: inline-block;   
27.   &:focus {   
28.     outline: 0 none;   
29.     outline-offset: -2px  
30.   }   
31.   &:checked {   
32.     background-color: #18b4ed;   
33.     border: solid 1px #FFFFFF;   
34.     @include checkedCon();   
35.   }   
36.   &:disabled {   
37.     background-color: #d9d9d9;   
38.     border: solid 1px #d9d9d9;   
39.     @include checkedCon();   
40.   }   
41.   &.checkbox-green:checked {   
42.     background-color: #5cb85c;   
43.   }   
44.   &.checkbox-orange:checked {   
45.     background-color: #f0ad4e;   
46.   }   
47.   &.checkbox-s {   
48.     width: 19px;   
49.     height: 19px;   
50.     @include checkedCon(13px);   
51.   }   
52. }   
53.     
54. .mui-checkbox-anim{   
55.   //border等其他元素不做过渡效果，增加视觉差，更有动画效果   
56.   transition: background-color ease $duration/2;   
57.     
58. }  

 
带switch开关
本身我做这一个ui的目的是支持移动端的页面，而webkit上也正好支持单标记的input元素是使用伪类（:before或:after），所以我没做更多的支持和优化，我只是想尽量的保持html干净，所以没用其他元素做模拟。如果你要使用在桌面应用上，或支持其他浏览器，可以自己稍微修改一下，反正我是没测试过。

今天继续分享一个iOS风格的switch开关按钮，样子也非常常见，如图：

主要是使用了<input  type="checkbox">来模拟实现，具体的HTML：

XML/HTML Code复制内容到剪贴板

1. <label><input class="mui-switch" type="checkbox"> 默认未选中</label>  
2. <label><input class="mui-switch" type="checkbox" checked> 默认选中</label>  
3. <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>  
4. <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>  
5. <label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim   
6. 类即可</label>  
7. <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>  

在实际的使用中后来又增加了两个过渡效果，分别加 mui-switch-animbg和mui-switch-anim 类即可，具体效果查看下面的demo页面。

CSS代码（SCSS导出的，排版有些奇怪）：

CSS Code复制内容到剪贴板

1. .mui-switch {   
2.   width: 52px;   
3.   height: 31px;   
4.   position: relative;   
5.   border: 1px solid #dfdfdf;   
6.   background-color: #fdfdfd;   
7.   box-shadow: #dfdfdf 0 0 0 0 inset;   
8.   border-radius: 20px;   
9.   border-top-left-radius: 20px;   
10.   border-top-rightright-radius: 20px;   
11.   border-bottom-left-radius: 20px;   
12.   border-bottom-rightright-radius: 20px;   
13.   background-clip: content-box;   
14.   display: inline-block;   
15.   -webkit-appearance: none;   
16.   user-select: none;   
17.   outline: none; }   
18.   .mui-switch:before {   
19.