修改checkbox样式
css样式
input[type="checkbox"] { width: 16px; height: 16px; display: inline-block; text-align: center; vertical-align: middle; position: relative; margin-top: -2px; outline: none; } input[type="checkbox"]::before { content: ""; position: absolute; top: 0px; left: 0px; background: #fff; width: 100%; height: 100%; border: 1px solid #655EFA; border-radius: 4px; box-sizing: content-box; outline: none; } input[type="checkbox"]:checked::before { content: "\2713"; background-color: #655EFA; position: absolute; top: 0; left: 0; width: 100%; border: 1px solid #655EFA; outline: none; color: #fff; font-size: 10px; font-weight: bold; border-radius: 4px; }
项目中遇到的问题
项目引入了Bootstrap所以会选中有一条蓝色边框
解决方法:
去除input边框 input{ border:0; webkit-box-shadow:none; box-shadow:none; } 去除input选中时的蓝色边框线 input:focus{ border-color:#fff; webkit-box-shadow:none; box-shadow:none; }