这样使用纯CSS美化checkbox和radio样式

这样使用纯CSS美化checkbox和radio样式

我们都知道checkbox和radio样式是很难用CSS更改的，不过我们可以转换一下思路。

今天我们就使用纯CSS美化checkbox复选框和radio单选框。下面会提供完整的源代码下载地址，效果如下图：

思路：label结合input的checkbox和radio进行美化

原理：

1、label for input的id，可以实现点击label,使input选中或者取消选中的效果2、用label包裹input，可以实现点击label,使input 选中或者取消选中。

知道了这个原理之后，用label把input包裹起来，然后把input隐藏，添加一个span等行内元素，控制这个行内元素样式就可以了。

input[type="checkbox"]:checked+span{}

就可以通过点击label，来达到选中和不选中的效果，达到了美化input checkbox的作用！

图片素材第一张是单选，第二张是多选，直接右键图片另存为就行了，图片素材如下：

html代码如下：

CSS代码如下：

body {font-family: '微软雅黑'; background:#eee}

.box {width: 600px;border:1px solid #ccc; overflow: hidden; background: #fff; margin: 20px auto;padding: 10px;}

span, label{vertical-align:middle;}

/*复选框（多选框）的美化CSS*/

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}

label{display:inline-block;cursor:pointer;}

label input[type="checkbox"] + span{width:20px;height:20px;display:inline-block;background:url(input-checkbox.gif) no-repeat;background-position:0 0;}

label input[type="checkbox"]:checked + span{background-position:0 -21px}

/*单选框的美化CSS*/

input[type="radio"]{appearance: none; -webkit-appearance: none;outline: none;display:none}

label{display:inline-block;cursor:pointer;}

label input[type="radio"] + span{width:20px;height:20px;display:inline-block;background:url(input-radio.gif) no-repeat;background-position:-26px 0;}

label input[type="radio"]:checked + span{background-position:0 0}

完整的代码如下：

完整的源代码下载地址：链接: https://pan.baidu.com/s/1kV1Po2b 密码: u37x