input type=checkbox样式设置

效果

html代码

<div class="checkbox-item"><input name="checkbox" id="item1" type="checkbox" /><label class="checkbox-label" for="item1">IM消息</label></div>

css样式设置代码

.checkbox-item{margin-right: 20px;display: inline-block;position: relative;}.checkbox-item label{line-height: 34px;vertical-align: middle;cursor: pointer;}.checkbox-item input[type="checkbox"] {margin-right: 5px;width: 20px;height: 20px;visibility: hidden;}/* 设计新的checkbox，位置 */.checkbox-item label:BEFORE {content: '';position: absolute;top: 5px;left: 0px;width: 20px;height: 20px;border-radius: 2px;border: 1px solid #bbb;background: #fff;cursor: pointer;}/* 点击初始的checkbox，将新的checkbox关联起来 */.checkbox-item input[type="checkbox"]:checked +label:BEFORE {content: '\2713';display: block;line-height: 20px;vertical-align: middle;text-align: center;background-color: #1890FF;color: #ffffff;}

参考：/qq_34182808/article/details/79992465