CSS美化单选框 radio 、多选框 checkbox 和 switch开关按钮( 二 ) _CSS

::before 为作用元素的第一个子节点插入dom中::after 为作用元素的最后一个子节点插入dom中

同：都是通过选择器为元素添加样式
异：伪元素会创建一个元素，但不是真正的Html元素，伪类相当于为一个元素创建一个class样式

实例自定义radio
html代码：
<input type="radio" id="radio"><label for="radio"></label>css代码：
input{ display:none;}label { display: inline-block; width: 30px; height: 30px; border: 1px solid #333; border-radius: 50%; position: relative;}label::after { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; width: 16px; height: 16px; border-radius: 50%; top: 50%; left: 50%; margin-top:-8px; margin-left:-8px; z-index: 1; content: ''; border:1px solid #333;}input:checked+label::after{ background:red;}实现效果：
点击前和点击后：

CSS美化单选框 radio 、多选框 checkbox 和 switch开关按钮

文章插图

自定义checkbox
漂亮的checkbox长这样的，看着就很可爱

文章插图

我们可以不追求那么完美的样式，可以实现下面简单好看的样式就可以

文章插图

html代码：
<input type="checkbox" id="checkbox"><label for="checkbox"></label>css代码：
input{ display:none;}label { display: inline-block; width: 30px; height: 30px; border: 1px solid #333; position: relative;}label::after { -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -o-transition: opacity .5s ease; -ms-transition: opacity .5s ease; transition: opacity .5s ease; cursor: pointer; position: absolute; content: ''; opacity: 0;}input:checked+label::after{ border: 2px solid #d73d32; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); width:20px; height:10px; top:50%; margin-top:-8px; left:50%; margin-left:-10px; opacity: 1.0;}实现效果：
点击前和点击后：

文章插图

自定义switch
继续分享一个IOS风格的switch开关按钮，样子也非常常见，如图：

文章插图

主要是使用了<input ?type="checkbox">来模拟实现，具体的HTML：
html 代码:
<label><input class="mui-switch" type="checkbox"> 默认未选中</label><label><input class="mui-switch" type="checkbox" checked> 默认选中</label><label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label><label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label><label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim类即可</label><label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>在实际的使用中后来又增加了两个过渡效果，分别加?mui-switch-animbg和mui-switch-anim?类即可，具体效果查看下面的demo页面。
CSS代码（SCSS导出的，排版有些奇怪）：
css 代码:

文章插图

剩下部分

文章插图

这里给出具体的css,方便大家复制本地实现
<style> .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-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-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-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-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 */</style>