表单元素中有label
元素和 for
属性,当我们点击label
标签时,对应的表单元素就会有所反应。我们就是依据这个特性来实现的自定义的checkbox样式,来直接上代码
<div class="checkbox"> <input type="checkbox" id="myCheck"> <label for="myCheck"></label> </div>
下面重点来了,css样式
/* 自定义复选框 */ #myCheck{ display: none; } #myCheck + label{ background-color: #fff; border-radius: 50%; border:1px solid #d3d3d3; 38px; height:38px; display: inline-block; text-align: center; vertical-align: middle; line-height: 38px; } #myCheck:checked + label{ background-color: #c30d23; color: #fff; } #myCheck:checked + label:after{ content:"\00a0"; border: 4px solid #fff; border-top- 0; border-right- 0; 17px; height: 12px; -webkit-transform: rotate(-50deg); position: absolute; top:10px; left:10px; }
以上一个简单的自定义复选按钮就出来啦,你们直接拿去用就好了