纯CSS方法美化一个单选按钮/复选框

纯CSS方法美化一个单选按钮/复选框

看见了吧，前面那个小单选按钮，UI 小姐姐画的还是很好看的，看看我们前端用到了什么技术。

很明显这个小东西是使用 HTML 原生的 radio 和 CheckBox 来实现的，原生的单选按钮/复选框样式如下：

原生单选按钮和复选框

写项目的时候看了看 element-ui 和 View UI（十月份之前还叫 iview 来，改名了。。。）有没有可以直接使用的组件，结果都没有可以直接拿来就用的。那没办法了，要么借助插件，要么手写，插件可以使用 pretty checkbox 来实现。

A pure CSS library to beautify checkbox and radio buttons

这个插件好呀，插件效果是茫茫的多，但是为了个小功能就用个插件有点杀鸡焉用牛刀的感觉，算了，还是自己来吧。不就写点 css 吗。 come on 反正年底了，划划水了，走起。

看下实现效果：

纯CSS方法美化一个单选按钮/复选框

源代码：

实现思路：

• 第一比较重要的 CSS 属性 appearance ，但是所有主流浏览器都不支持 appearance 属性，使用的时候必须加浏览器前缀。Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。其主要作用是去除系统默认的样式，appearance 常用于 IOS 下移除原生样式，如果用在复选框上，复选框就会直接消失，这时复选框的样式就能自定义样式了。

做个试验，页面放置一个复选框：

给复选框添加 -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 来实现。可见没什么难的只要有百度，上源代码：

比較常見的還有一個叉，順便也寫出來了，上面的 ♥ 我們都給畫出來了，這個 ×就比較簡單了，正好兩個僞元素（正負）旋轉45度角。

送上源代碼：