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;
}

 

参考：https://blog.csdn.net/qq_34182808/article/details/79992465