大家好，我是梦辛工作室的灵，想原生的checkbox是真心的不太好看，所以我们还得费劲心思去修改它的样式，下面是我写的一个样式，提供给大家参考，一如既往先看效果：
下面是实现代码： CSS
.custom_checkbox .checkboxcss { cursor: pointer; position: absolute; width: 15px; height: 15px; top: 0; left: 0; background: #f7f7f7; border: 1px solid #b0b0b0; transition: all .3s; } .custom_checkbox input[type="checkbox"]:checked+label { background: #0068F2; border: 1px solid #0068F2; } .custom_checkbox { position: relative; } .custom_checkbox .checkboxcss:after { opacity: 0; content: ''; position: absolute; width: 7px; height: 3px; background: transparent; top: 3px; left: 3px; border: 3px solid #FFF; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .custom_checkbox input[type=checkbox]:checked+label:after { opacity: 1; }html
<div class="custom_checkbox flex_row flex_vcenter"> <input type="checkbox" id="checkbox" class="checkbox-input" /> <label class="checkboxcss" for="checkbox"></label> <span style="margin-left: 5px;">消息内容</span> </div>