checkbox多选
最近写了一个适合移动端的checkbox,如图:
ps:中间的勾勾是iconfont,iOS风格的。
具体的HTML:
- <divclass="mui-checkbox-con">
- <label>
- <inputclass="mui-checkbox"type="checkbox">默认未选中</label>
- </div>
- <divclass="mui-checkbox-con">
- <label>
- <inputclass="mui-checkbox"type="checkbox"checked>默认选中</label>
- </div>
- <divclass="mui-checkbox-con">
- <label>
- <inputclass="mui-checkboxcheckbox-orange"type="checkbox"checked>橘黄色checkbox-orange</label>
- </div>
- <divclass="mui-checkbox-con">
- <label>
- <inputclass="mui-checkboxcheckbox-green"type="checkbox"checked>绿色checkbox-green</label>
- </div>
- <divclass="mui-checkbox-con">
- <label>
- <inputclass="mui-checkbox"type="checkbox"disabled>禁用</label>
- </div>
CSS代码(SCSS导出的,排版有些奇怪):
- .mui-checkbox{
- -webkit-appearance:none;
- position:relative;
- width:25px;
- height:25px;
- margin-right:10px;
- background-color:#FFFFFF;
- border:solid1px#d9d9d9;
- border-top-left-radius:20px;
- border-top-rightright-radius:20px;
- border-bottom-left-radius:20px;
- border-bottom-rightright-radius:20px;
- background-clip:padding-box;
- display:inline-block;}
- .mui-checkbox:focus{
- outline:0none;
- outline-offset:-2px;}
- .mui-checkbox:checked{
- background-color:#18b4ed;
- border:solid1px#FFFFFF;}
- .mui-checkbox:checked:before{
- display:inline-block;
- margin-top:1px;
- margin-left:2px;
- font-family:iconfont;
- content:"\e667";
- color:#FFFFFF;
- font-size:18px;}
- .mui-checkbox:disabled{
- background-color:#d9d9d9;
- border:solid1px#d9d9d9;}
- .mui-checkbox:disabled:before{
- display:inline-block;
- margin-top:1px;
- margin-left:2px;
- font-family:iconfont;
- content:"\e667";
- color:#FFFFFF;
- font-size:18px;}
- .mui-checkbox.checkbox-green:checked{
- background-color:#5cb85c;}
- .mui-checkbox.checkbox-orange:checked{
- background-color:#f0ad4e;}
- .mui-checkbox.checkbox-s{
- width:19px;
- height:19px;}
- .mui-checkbox.checkbox-s:before{
- display:inline-block;
- margin-top:1px;
- margin-left:2px;
- font-family:iconfont;
- content:"\e667";
- color:#FFFFFF;
- font-size:13px;}
- .mui-checkbox-anim{
- -webkit-transition:background-colorease0.2s;
- transition:background-colorease0.2s;}
SCSS代码:
- @mixincheckedCon($fs:18px){
- &:before{
- display:inline-block;
- margin-top:1px;
- margin-left:2px;
- font-family:iconfont;
- content:"\e667";
- color:#FFFFFF;
- font-size:$fs;
- }
- }
- $duration:.4s;
- .mui-checkbox{
- -webkit-appearance:none;
- position:relative;
- width:25px;
- height:25px;
- margin-right:10px;
- background-color:#FFFFFF;
- border:solid1px#d9d9d9;
- border-top-left-radius:20px;
- border-top-rightright-radius:20px;
- border-bottom-left-radius:20px;
- border-bottom-rightright-radius:20px;
- background-clip:padding-box;
- display:inline-block;
- &:focus{
- outline:0none;
- outline-offset:-2px
- }
- &:checked{
- background-color:#18b4ed;
- border:solid1px#FFFFFF;
- @includecheckedCon();
- }
- &:disabled{
- background-color:#d9d9d9;
- border:solid1px#d9d9d9;
- @includecheckedCon();
- }
- &.checkbox-green:checked{
- background-color:#5cb85c;
- }
- &.checkbox-orange:checked{
- background-color:#f0ad4e;
- }
- &.checkbox-s{
- width:19px;
- height:19px;
- @includecheckedCon(13px);
- }
- }
- .mui-checkbox-anim{
- //border等其他元素不做过渡效果,增加视觉差,更有动画效果
- transition:background-colorease$duration/2;
- }
带switch开关
本身我做这一个ui的目的是支持移动端的页面,而webkit上也正好支持单标记的input元素是使用伪类(:before或:after),所以我没做更多的支持和优化,我只是想尽量的保持html干净,所以没用其他元素做模拟。如果你要使用在桌面应用上,或支持其他浏览器,可以自己稍微修改一下,反正我是没测试过。
今天继续分享一个iOS风格的switch开关按钮,样子也非常常见,如图:
主要是使用了<input type="checkbox">来模拟实现,具体的HTML:
- <label><inputclass="mui-switch"type="checkbox">默认未选中</label>
- <label><inputclass="mui-switch"type="checkbox"checked>默认选中</label>
- <label><inputclass="mui-switchmui-switch-animbg"type="checkbox">默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
- <label><inputclass="mui-switchmui-switch-animbg"type="checkbox"checked>默认选中</label>
- <label><inputclass="mui-switchmui-switch-anim"type="checkbox">默认未选中,过渡效果,加mui-switch-anim
- 类即可</label>
- <label><inputclass="mui-switchmui-switch-anim"type="checkbox"checked>默认选中</label>
在实际的使用中后来又增加了两个过渡效果,分别加 mui-switch-animbg和mui-switch-anim 类即可,具体效果查看下面的demo页面。
CSS代码(SCSS导出的,排版有些奇怪):
- .mui-switch{
- width:52px;
- height:31px;
- position:relative;
- border:1pxsolid#dfdfdf;
- background-color:#fdfdfd;
- box-shadow:#dfdfdf0000inset;
- border-radius:20px;
- border-top-left-radius:20px;
- border-top-rightright-radius:20px;
- border-bottom-left-radius:20px;
- border-bottom-rightright-radius:20px;
- background-clip:content-box;
- display:inline-block;
- -webkit-appearance:none;
- user-select:none;
- outline:none;}
- .mui-switch:before{
- content:'';
- width:29px;
- height:29px;
- position:absolute;
- top:0px;
- left:0;
- border-radius:20px;
- border-top-left-radius:20px;
- border-top-rightright-radius:20px;
- border-bottom-left-radius:20px;
- border-bottom-rightright-radius:20px;
- background-color:#fff;
- box-shadow:01px3pxrgba(0,0,0,0.4);}
- .mui-switch:checked{
- border-color:#64bd63;
- box-shadow:#64bd6300016pxinset;
- background-color:#64bd63;}
- .mui-switch:checked:before{
- left:21px;}
- .mui-switch.mui-switch-animbg{
- transition:background-colorease0.4s;}
- .mui-switch.mui-switch-animbg:before{
- transition:left0.3s;}
- .mui-switch.mui-switch-animbg:checked{
- box-shadow:#dfdfdf0000inset;
- background-color:#64bd63;
- transition:border-color0.4s,background-colorease0.4s;}
- .mui-switch.mui-switch-animbg:checked:before{
- transition:left0.3s;}
- .mui-switch.mui-switch-anim{
- transition:bordercubic-bezier(0,0,0,1)0.4s,box-shadowcubic-bezier(0,0,0,1)0.4s;}
- .mui-switch.mui-switch-anim:before{
- transition:left0.3s;}
- .mui-switch.mui-switch-anim:checked{
- box-shadow:#64bd6300016pxinset;
- background-color:#64bd63;
- transition:borderease0.4s,box-shadowease0.4s,background-colorease1.2s;}
- .mui-switch.mui-switch-anim:checked:before{
- transition:left0.3s;}
- /*#sourceMappingURL=mui-switch.css.map*/
SCSS代码:
- @mixinborderRadius($radius:20px){
- border-radius:$radius;
- border-top-left-radius:$radius;
- border-top-rightright-radius:$radius;
- border-bottom-left-radius:$radius;
- border-bottom-rightright-radius:$radius;
- }
- $duration:.4s;
- $checkedColor:#64bd63;
- .mui-switch{
- width:52px;
- height:31px;
- position:relative;
- border:1pxsolid#dfdfdf;
- background-color:#fdfdfd;
- box-shadow:#dfdfdf0000inset;
- @includeborderRadius();
- background-clip:content-box;
- display:inline-block;
- -webkit-appearance:none;
- user-select:none;
- outline:none;
- &:before{
- content:'';
- width:29px;
- height:29px;
- position:absolute;
- top:0px;
- left:0;
- @includeborderRadius();
- background-color:#fff;
- box-shadow:01px3pxrgba(0,0,0,0.4);
- }
- &:checked{
- border-color:$checkedColor;
- box-shadow:$checkedColor00016pxinset;
- background-color:$checkedColor;
- &:before{
- left:21px;
- }
- }
- &.mui-switch-animbg{
- transition:background-colorease$duration;
- &:before{
- transition:left0.3s;
- }
- &:checked{
- box-shadow:#dfdfdf0000inset;
- background-color:$checkedColor;
- transition:border-color$duration,background-colorease$duration;
- &:before{
- transition:left0.3s;
- }
- }
- }
- &.mui-switch-anim{
- transition:bordercubic-bezier(0,0,0,1)$duration,box-shadowcubic-bezier(0,0,0,1)$duration;
- &:before{
- transition:left0.3s;
- }
- &:checked{
- box-shadow:$checkedColor00016pxinset;
- background-color:$checkedColor;
- transition:borderease$duration,box-shadowease$duration,background-colorease$duration*3;
- &:before{
- transition:left0.3s;
- }
- }
- }
- }
以上就是如何使用CSS3编写类似iOS中的复选框及带开关的按钮。人生短短多少十,不要给本人留下了什么遗憾,想笑就笑,想哭就哭,该爱的时候就去爱,无谓压抑自己。更多关于如何使用CSS3编写类似iOS中的复选框及带开关的按钮请关注haodaima.com其它相关文章!