Use CSS3 to write code similar to check boxes in iOS and buttons with switches

This article mainly describes the use of CSS3 to write similar to the iOS check box and with the switch button, the need for friends can refer to the following

CheckBox multiple Selection

Recently wrote a checkbox for the mobile end,

PS: The middle of the Gogo is Iconfont,ios style.

Specific HTML:

<p class= "Mui-checkbox-con" >    <label>        <input class= "Mui-checkbox" type= "checkbox" > Default unchecked </label></p><p class= "Mui-checkbox-con" >    <label>        <input class= "Mui-checkbox" type= "checkbox" checked> default check </label></p><p class= "Mui-checkbox-con" >    <label>        <input class= "Mui-checkbox checkbox-orange" type= "checkbox" Checked> Orange checkbox-orange</label></p ><p class= "Mui-checkbox-con" >    <label>        <input class= "Mui-checkbox checkbox-green" type= " CheckBox "Checked> Green checkbox-green</label></p><p class=" Mui-checkbox-con ">    <label >        <input class= "Mui-checkbox" type= "checkbox" disabled> Disable </label></p>

CSS code (SCSS exported, typesetting a bit strange):

. mui-checkbox {-webkit-appearance:none;     position:relative;     width:25px;     height:25px;     margin-right:10px;     Background-color: #FFFFFF;     Border:solid 1px #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:0 none; Outline-offset: -2px;       }. mui-checkbox:checked {background-color: #18b4ed; Border:solid 1px #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:solid 1px #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-color ease 0.2s; Transition:background-color ease 0.2s; }

Scss Code:

@mixin Checkedcon ($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:solid 1px #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:0 none;       Outline-offset: -2px} &:checked {background-color: #18b4ed;       Border:solid 1px #FFFFFF;     @include Checkedcon ();       } &:d isabled {background-color: #d9d9d9;       Border:solid 1px #d9d9d9;     @include Checkedcon (); } &.checkbox-green:checked {background-color: #5cb85c;     } &.checkbox-orange:checked {background-color: #f0ad4e;       } &.checkbox-s {width:19px;       height:19px;     @include Checkedcon (13px);   }}. mui-checkbox-anim{//border and other elements do not transition effect, increase visual difference, more animation effect Transition:background-color ease $duration/2; }

with switch switches
In itself I do this UI is to support the mobile page, and WebKit also just support the single tag input element is the use of Pseudo-class (: Before or: after), so I did not do more support and optimization, I just want to keep HTML clean, so no other elements to do the simulation. If you want to use on the desktop app, or support other browsers, you can modify a little bit, anyway, I have not tested.

Today we continue to share an iOS-style switch switch button that looks very common,

The main use of the <input type= "checkbox" > to simulate the implementation of the specific HTML:

<label><input class= "Mui-switch" type= "checkbox" > </label><label><input class= "not selected by default" Mui-switch "type=" checkbox "checked> default check </label><label><input class=" Mui-switch MUI-SWITCH-ANIMBG "type=" checkbox > Default unchecked, Simple background transition effect, add MUI-SWITCH-ANIMBG class to </label><label><input class= "Mui-switch mui-switch-animbg" type= "checkbox" checked> default check </label><label><input class= " Mui-switch mui-switch-anim "type=" checkbox > Default unchecked, Transition effect, plus Mui-switch-anim   class </label><label> <input class= "Mui-switch mui-switch-anim" type= "checkbox" checked> default Check </label>

In the actual use later added two transition effects, respectively, plus MUI-SWITCH-ANIMBG and Mui-switch-anim class, the specific effect view the following demo page.

CSS code (SCSS exported, typesetting a bit strange):

. mui-switch {width:52px;     height:31px;     position:relative;     border:1px solid #dfdfdf;     Background-color: #fdfdfd;     Box-shadow: #dfdfdf 0 0 0 0 inset;     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:0 1px 3px rgba (0, 0, 0, 0.4);       }. mui-switch:checked {border-color: #64bd63;     Box-shadow: #64bd63 0 0 0 16px inset;  Background-color: #64bd63;     }. mui-switch:checked:before {left:21px;}       . MUI-SWITCH.MUI-SWITCH-ANIMBG {Transition:background-color ease 0.4s;}       . mui-switch.mui-switch-animbg:before {transition:left 0.3s;}         . mui-switch.mui-switch-animbg:checked {box-shadow: #dfdfdf 0 0 0 0 inset;         Background-color: #64bd63; Transition:border-color 0.4s, background-color ease 0.4s;     }. mui-switch.mui-switch-animbg:checked:before {transition:left 0.3s;} . Mui-switch.mui-switch-anim {Transition:border cubic-bezier (0, 0, 0, 1) 0.4s, Box-shadow cubic-bezier (0, 0, 0, 1) 0.4s;       }. mui-switch.mui-switch-anim:before {transition:left 0.3s;}         . mui-switch.mui-switch-anim:checked {box-shadow: #64bd63 0 0 0 16px inset;         Background-color: #64bd63; Transition:border ease 0.4s, Box-shadow ease 0.4s, background-color ease 1.2s; }. Mui-switch.mui-switch-anim:checkeD:before {transition:left 0.3s;} /*# Sourcemappingurl=mui-switch.css.map */

Scss Code:

@mixin Borderradius ($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:1px solid #dfdfdf;     Background-color: #fdfdfd;     Box-shadow: #dfdfdf 0 0 0 0 inset;     @include Borderradius ();     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;       @include Borderradius ();       Background-color: #fff;     box-shadow:0 1px 3px rgba (0, 0, 0, 0.4);       } &:checked {border-color: $checkedColor;       Box-shadow: $checkedColor 0 0 0 16px inset; Background-color: $checkEdcolor;       &:before {left:21px;       }} &.MUI-SWITCH-ANIMBG {Transition:background-color ease $duration;       &:before {transition:left 0.3s;         } &:checked {box-shadow: #dfdfdf 0 0 0 0 inset;         Background-color: $checkedColor;         Transition:border-color $duration, background-color ease $duration;         &:before {transition:left 0.3s; }}} &.mui-switch-anim {Transition:border cubic-bezier (0, 0, 0, 1) $duration, Box-shadow cubic-       Bézier (0, 0, 0, 1) $duration;       &:before {transition:left 0.3s;         } &:checked {box-shadow: $checkedColor 0 0 0 16px inset;         Background-color: $checkedColor;         Transition:border ease $duration, Box-shadow ease $duration, background-color ease $duration;         &:before {transition:left 0.3s; }       }     }   }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!