[TOC]
>[success] # css美化checkbox复选框
~~~
下图是模仿'饿了吗ui'的'复选框的样式'，我们用原生的写法来实现并且'美化'它
~~~
html
~~~
<label>
<input class="toggle-trigger" value="false" type="checkbox" />
<div class="toggle-item"></div>
<span class="label-style">姓名</span>
</label>
~~~
css
~~~
label{
cursor: pointer;
}
/* 美化Checkbox */
.toggle-item{
display: inline-block;
position: relative;
vertical-align: middle;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
z-index: 1;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
/* 隐藏默认input */
.toggle-trigger {
display: none;
}
/* 取消选中时的样式 */
.toggle-trigger + :not(checked) + .toggle-item{
background-color: #fff;
border-color: #dcdfe6;
}
/* 选中时的样式 */
.toggle-trigger:checked + .toggle-item{
background-color: #409eff;
border-color: #409eff;
}
/* 对勾样式 */
.toggle-trigger:checked + .toggle-item::after{
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform .15s ease-in .05s;
transform-origin: center;
transform: rotate(45deg) scaleY(1);
}
/* label文字样式 */
.label-style{
vertical-align: middle;
}
~~~
