美化input=checkbox 复选框样式

HTML

<./div>

css

/* 选中复选框自定义*/
#input-check .input_check{position: absolute;width: 14px;height: 14px;visibility: hidden;background: #E92333;}
#input-check .input_check+label{display: inline-block;width: 12px;height: 12px;border-radius: 2px;cursor: pointer;background: url(../newImage/check_yes.png) no-repeat;background-position: -31px -3px;border: 1px solid #8A8A8A;}
#input-check .input_check:checked+label{background-position: 0px 0;border: none;width: 14px;height: 14px;cursor: pointer;}

效果图
在这里插入图片描述

你可能感兴趣的:(css3,css,选中复选框自定义)