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

路上的杨柳依然神彩奕奕的低垂着黄绿色的发丝,好像冬天的降温没带给她们多少伤害。我倒感受到她们内心的寒冷,叶子摸着十分冰冷,也缺少了昔日的水分。冬天的到来,摧残了多少无辜的生命,又演绎了多少生命的童话。

checkbox多选

最近写了一个适合移动端的checkbox,如图:

ps:中间的勾勾是iconfont,iOS风格的。

具体的HTML:

XML/HTML Code复制内容到剪贴板
  1. <divclass="mui-checkbox-con">
  2. <label>
  3. <inputclass="mui-checkbox"type="checkbox">默认未选中</label>
  4. </div>
  5. <divclass="mui-checkbox-con">
  6. <label>
  7. <inputclass="mui-checkbox"type="checkbox"checked>默认选中</label>
  8. </div>
  9. <divclass="mui-checkbox-con">
  10. <label>
  11. <inputclass="mui-checkboxcheckbox-orange"type="checkbox"checked>橘黄色checkbox-orange</label>
  12. </div>
  13. <divclass="mui-checkbox-con">
  14. <label>
  15. <inputclass="mui-checkboxcheckbox-green"type="checkbox"checked>绿色checkbox-green</label>
  16. </div>
  17. <divclass="mui-checkbox-con">
  18. <label>
  19. <inputclass="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:solid1px#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:0none;
  17. outline-offset:-2px;}
  18. .mui-checkbox:checked{
  19. background-color:#18b4ed;
  20. border:solid1px#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:solid1px#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. .mui-checkbox-anim{
  56. -webkit-transition:background-colorease0.2s;
  57. transition:background-colorease0.2s;}

SCSS代码:

CSS Code复制内容到剪贴板
  1. @mixincheckedCon($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:solid1px#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:0none;
  29. outline-offset:-2px
  30. }
  31. &:checked{
  32. background-color:#18b4ed;
  33. border:solid1px#FFFFFF;
  34. @includecheckedCon();
  35. }
  36. &:disabled{
  37. background-color:#d9d9d9;
  38. border:solid1px#d9d9d9;
  39. @includecheckedCon();
  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. @includecheckedCon(13px);
  51. }
  52. }
  53. .mui-checkbox-anim{
  54. //border等其他元素不做过渡效果,增加视觉差,更有动画效果
  55. transition:background-colorease$duration/2;
  56. }


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

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

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

XML/HTML Code复制内容到剪贴板
  1. <label><inputclass="mui-switch"type="checkbox">默认未选中</label>
  2. <label><inputclass="mui-switch"type="checkbox"checked>默认选中</label>
  3. <label><inputclass="mui-switchmui-switch-animbg"type="checkbox">默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
  4. <label><inputclass="mui-switchmui-switch-animbg"type="checkbox"checked>默认选中</label>
  5. <label><inputclass="mui-switchmui-switch-anim"type="checkbox">默认未选中,过渡效果,加mui-switch-anim
  6. 类即可</label>
  7. <label><inputclass="mui-switchmui-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:1pxsolid#dfdfdf;
  6. background-color:#fdfdfd;
  7. box-shadow:#dfdfdf0000inset;
  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. content:'';
  20. width:29px;
  21. height:29px;
  22. position:absolute;
  23. top:0px;
  24. left:0;
  25. border-radius:20px;
  26. border-top-left-radius:20px;
  27. border-top-rightright-radius:20px;
  28. border-bottom-left-radius:20px;
  29. border-bottom-rightright-radius:20px;
  30. background-color:#fff;
  31. box-shadow:01px3pxrgba(0,0,0,0.4);}
  32. .mui-switch:checked{
  33. border-color:#64bd63;
  34. box-shadow:#64bd6300016pxinset;
  35. background-color:#64bd63;}
  36. .mui-switch:checked:before{
  37. left:21px;}
  38. .mui-switch.mui-switch-animbg{
  39. transition:background-colorease0.4s;}
  40. .mui-switch.mui-switch-animbg:before{
  41. transition:left0.3s;}
  42. .mui-switch.mui-switch-animbg:checked{
  43. box-shadow:#dfdfdf0000inset;
  44. background-color:#64bd63;
  45. transition:border-color0.4s,background-colorease0.4s;}
  46. .mui-switch.mui-switch-animbg:checked:before{
  47. transition:left0.3s;}
  48. .mui-switch.mui-switch-anim{
  49. transition:bordercubic-bezier(0,0,0,1)0.4s,box-shadowcubic-bezier(0,0,0,1)0.4s;}
  50. .mui-switch.mui-switch-anim:before{
  51. transition:left0.3s;}
  52. .mui-switch.mui-switch-anim:checked{
  53. box-shadow:#64bd6300016pxinset;
  54. background-color:#64bd63;
  55. transition:borderease0.4s,box-shadowease0.4s,background-colorease1.2s;}
  56. .mui-switch.mui-switch-anim:checked:before{
  57. transition:left0.3s;}
  58. /*#sourceMappingURL=mui-switch.css.map*/

SCSS代码:

CSS Code复制内容到剪贴板
  1. @mixinborderRadius($radius:20px){
  2. border-radius:$radius;
  3. border-top-left-radius:$radius;
  4. border-top-rightright-radius:$radius;
  5. border-bottom-left-radius:$radius;
  6. border-bottom-rightright-radius:$radius;
  7. }
  8. $duration:.4s;
  9. $checkedColor:#64bd63;
  10. .mui-switch{
  11. width:52px;
  12. height:31px;
  13. position:relative;
  14. border:1pxsolid#dfdfdf;
  15. background-color:#fdfdfd;
  16. box-shadow:#dfdfdf0000inset;
  17. @includeborderRadius();
  18. background-clip:content-box;
  19. display:inline-block;
  20. -webkit-appearance:none;
  21. user-select:none;
  22. outline:none;
  23. &:before{
  24. content:'';
  25. width:29px;
  26. height:29px;
  27. position:absolute;
  28. top:0px;
  29. left:0;
  30. @includeborderRadius();
  31. background-color:#fff;
  32. box-shadow:01px3pxrgba(0,0,0,0.4);
  33. }
  34. &:checked{
  35. border-color:$checkedColor;
  36. box-shadow:$checkedColor00016pxinset;
  37. background-color:$checkedColor;
  38. &:before{
  39. left:21px;
  40. }
  41. }
  42. &.mui-switch-animbg{
  43. transition:background-colorease$duration;
  44. &:before{
  45. transition:left0.3s;
  46. }
  47. &:checked{
  48. box-shadow:#dfdfdf0000inset;
  49. background-color:$checkedColor;
  50. transition:border-color$duration,background-colorease$duration;
  51. &:before{
  52. transition:left0.3s;
  53. }
  54. }
  55. }
  56. &.mui-switch-anim{
  57. transition:bordercubic-bezier(0,0,0,1)$duration,box-shadowcubic-bezier(0,0,0,1)$duration;
  58. &:before{
  59. transition:left0.3s;
  60. }
  61. &:checked{
  62. box-shadow:$checkedColor00016pxinset;
  63. background-color:$checkedColor;
  64. transition:borderease$duration,box-shadowease$duration,background-colorease$duration*3;
  65. &:before{
  66. transition:left0.3s;
  67. }
  68. }
  69. }
  70. }

以上就是如何使用CSS3编写类似iOS中的复选框及带开关的按钮。人生短短多少十,不要给本人留下了什么遗憾,想笑就笑,想哭就哭,该爱的时候就去爱,无谓压抑自己。更多关于如何使用CSS3编写类似iOS中的复选框及带开关的按钮请关注haodaima.com其它相关文章!

标签: 复选框