看见了吧，前面那个小单选按钮，UI 小姐姐画的还是很好看的，看看我们前端用到了什么技术。
很明显这个小东西是使用 HTML 原生的 radio 和 CheckBox 来实现的，原生的单选按钮/复选框样式如下：
写项目的时候看了看 element-ui 和 View UI（十月份之前还叫 iview 来，改名了。。。）有没有可以直接使用的组件，结果都没有可以直接拿来就用的。那没办法了，要么借助插件，要么手写，插件可以使用 pretty checkbox 来实现。
这个插件好呀，插件效果是茫茫的多，但是为了个小功能就用个插件有点杀鸡焉用牛刀的感觉，算了，还是自己来吧。不就写点 css 吗。 come on 反正年底了，划划水了，走起。
看下实现效果：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS方法美化一个单选按钮/复选框</title>
<style>
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);
}
</style>
</head>
<body>
<input type="checkbox" class="checkbox">
</body>
</html>
实现思路：
- 第一比较重要的 CSS 属性 appearance ，但是所有主流浏览器都不支持 appearance 属性，使用的时候必须加浏览器前缀。Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。其主要作用是去除系统默认的样式，appearance 常用于 IOS 下移除原生样式，如果用在复选框上，复选框就会直接消失，这时复选框的样式就能自定义样式了。
做个试验，页面放置一个复选框：
<input type="checkbox" class="box">
给复选框添加 -webkit-appearance: none; 这一条样式，复选框消失，标志着此时复选框的默认样式被去除，可以自定义样式了，不然你没办法去用 css 去操作 checkbox 的样式。
这时候设置以下样式我们就能得到个圆：
.box{
-webkit-appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid red;
}
但此时这个东西有个缺点，看动图演示：
我们去点击会默认出现外边框，圆外区域点击下才能消失，这个很好理解，input 为 text 的时候，作为输入框，输入框会有失焦聚焦的效果，而且 checkbox 说到底也是 input 所以也会有这个效果，只要我们在加上一条 css 语句就行了。
outline: none;//去除默认外边框
这时候就差一个背景变色和对号显示了√。这个就太简单了，选中的时候使用x:checked 来设置选中的样式。里面的对号就是一个正方形只显示了两条边，然后通过 transform:rotate() 旋转四十五度达到的效果，这个用伪元素来实现就行了。
你肯定有个疑问能不能使用 radio 来替代 checkbox ？
答案是最好不要，因为如果只有一个 radio 标签，一旦选中就不能取消了,单选的切换只能是最少两个以上的相同 name 的标签，只能通过刷新页面来恢复初始页面。
既然都写到这里了，我们就试着模仿一下 pretty checkbox 里面的东西，比如下面这个图示例子：
这个心还可以放大缩小，一些炫酷的效果就可以使用 animation 来实现。可见没什么难的只要有百度，上源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS方法美化一个单选按钮/复选框</title>
<style>
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);
}
</style>
</head>
<body>
<input type="checkbox" class="checkbox" name="radio">
</body>
</html>
比較常見的還有一個叉，順便也寫出來了，上面的 ♥ 我們都給畫出來了，這個 ×就比較簡單了，正好兩個僞元素（正負）旋轉45度角。
送上源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS方法美化一个单选按钮/复选框</title>
<style>
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);
}
</style>
</head>
<body>
<input type="checkbox" class="checkbox">
</body>
</html>
写作时间 2020-01-17 20:47
补充于2020年2月28日 21点19分
这次主要是讨论下为什么单选
单选按钮/复选框不能直接通过 CSS 样式自定义，非要通过appearance去除默认样式才能自定义？
我们根据元素在布局时是否换行把 HTML 标签分为块级元素和内联元素。典型的标签就是 div 和 span。如果根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。
替换元素，顾名思义，内容可以被替换。举个典型的例子：
<img src="1.jpg">
如果我们把上面的1.jpg换成2.jpg，图片就被替换了，这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。
替换元素除了内容可替换这一特性以外，其中还有一个重要的特性。就是内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观？需要类似appearance属性，或者浏览器自身暴露的一些样式接口，例如::-ms-check{}可以更改高版本IE浏览器下单复选框的内间距、背景色等样式，但是直接input[type='checkbox']{}却无法更改内间距、背景色等样式。
总结：复选框属于 input 标签是可替换的元素，需要类似appearance属性才能修改样式。
参考张鑫旭的「CSS 世界」。
