纯CSS方式美化单选按钮/复选框
纯CSS方式美化单选按钮/复选框
你看，后面的小单选按钮是UI妹子画的挺好看的。 看看我们在后端使用的技术。
很明显这个小东西是利用HTML原生的radio和CheckBox来实现的。 原生单选按钮/复选框样式如下：
本机单选按钮和复选框
我在写项目的时候，查看了element-ui和ViewUI（10月份之前叫了iview，改名了……），看看有没有可以直接使用的组件。 结果就是没有可以直接使用的组件。 没有别的办法复选框 css，要么用插件，要么手写。 该插件可以使用prettycheckbox来实现。
Apure CSS 库用于美化复选框和单选按钮
这个插件很棒，插件非常有效，仅仅为了一个小功能而使用插件感觉有点大材小用，所以算了，自己动手吧。 不要只写一些CSS。 comeon总之，岁末了，划水复选框 css，走吧。
看看效果：
纯CSS方式美化单选按钮/复选框
源代码：
纯CSS方法美化一个单选按钮/复选框
body{
margin: 100px 100px;
}
.checkbox:checked {
background:#E29F00;
}
.checkbox {
-webkit-appearance:none;
-moz-appearance:none;
outline: none;
width:20px;
height:20px;
background-color:#ffffff;
border:solid 1px #dddddd;
border-radius:50%;
margin:0;
padding:0;
position:relative;
display:inline-block;
/*文字对齐方式*/
vertical-align:top;
transition:background-color ease 0.1s;
}
.checkbox:checked::after {
content:'';
top:3px;
left:3px;
position:absolute;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
transform:rotate(-45deg);
}
实现思路：
作为实验，在页面上放置一个复选框：
添加 -webkit-appearance:none; 子句添加到复选框，复选框消失，说明复选框默认样式已取消，可以自定义样式。 否则，您将无法使用 CSS 来操作该复选框。 风格。
这时我们可以通过设置以下样式来得到一个圆：
.box{
-webkit-appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid red;
}
但是这个东西此时有一个缺点，看动画演示：
动画演示
当我们点击它的时候，默认会出现外边框，点击它的时候，圆圈外面的区域就会消失。 这很容易理解。 当输入为文本时，作为输入框，输入框会有失焦的效果，但毕竟复选框也是输入。 所以也会有这样的效果，只要我们加上一句css即可。
outline: none;//去除默认外边框
此时，只有背景颜色变化和显示√的勾号。 这个太简单了，选中时用x:checked来设置选中的样式。 上面的勾是一个正圆，只显示两条边，然后通过transform:rotate()将其旋转45度达到效果。 这可以通过伪元素来实现。
您一定想知道是否可以使用单选而不是复选框？
答案是最好不要，因为如果只有一个单选标签，则一旦选择就无法取消。 单选开关只能是至少两个同名标签，且只能通过刷新页面才能恢复初始页面。
既然我们已经讲到这里了，那么我们就尝试模仿一下 Pretty 复选框上的东西，如下图所示的反例：
心脏还可以放大和缩小，利用动画可以实现一些眼花缭乱的疗效。 可见只要有百度就没有什么难的，源码：
纯CSS方法美化一个单选按钮/复选框
body{
margin: 100px 100px;
}
.checkbox {
-webkit-appearance:none;
-moz-appearance:none;
outline: none;
width:20px;
height:20px;
background-color:#ffffff;
border:solid 1px #dddddd;
border-radius:50%;
margin:0;
padding:0;
position:relative;
display:inline-block;
/*文字对齐方式*/
vertical-align:top;
transition:background-color ease 0.5s;
}
.checkbox:checked::after,.checkbox:checked::before{
content: "";
position: absolute;
width: 8px;
height: 12px;
top:3px;
left:3px;
border-radius: 5px 5px 0 0;
background-color: red;
}
.checkbox:checked::after{
transform: rotate(-45deg);
}
.checkbox:checked::before{
left: 5.8px;
transform: rotate(45deg);
}
还有一种比较常见的十字，也顺便写出来。 我们还在里面画了♥。 这个×比较简单，就是两个伪元素（正负）旋转45度角。
发送源码：
纯CSS方法美化一个单选按钮/复选框
body{
margin: 100px 100px;
}
.checkbox:checked {
background:#5cb85c;
}
.checkbox {
-webkit-appearance:none;
-moz-appearance:none;
outline: none;
width:20px;
height:20px;
background-color:#ffffff;
border:solid 1px #dddddd;
border-radius:50%;
margin:0;
padding:0;
position:relative;
display:inline-block;
/*文字对齐方式*/
vertical-align:top;
transition:background-color ease 0.1s;
}
.checkbox:checked::after,.checkbox:checked::before {
content:'';
position:absolute;
height:2px;
width:15px;
left: 1.5px;
top: 8px;
background-color: #ffffff;
}
.checkbox:checked::after{
transform: rotate(-45deg);
}
.checkbox:checked::before {
transform: rotate(45deg);
}
