CSS/HTML复选框自定义样式
话不多说 直接上代码
HTML
<div class="circle-check"><input type="checkbox" /></div><div class="square-check"><input type="checkbox"></div>
CSS
/* 自定义复选框样式 */.circle-check>input[type="checkbox"] {width: 1.54rem;height: 1.54rem;display: inline-block;text-align: center;vertical-align: baseline;line-height: 1.54rem;position: relative;border-radius: 50%;outline: none;-webkit-appearance: none;border: 1px solid #fff;-webkit-tab-highlight-color: rgba(0, 0, 0, 0);color: #fff;background: #fff;}.circle-check>input[type="checkbox"]::before {content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #999999;border-radius: 50%;color: #fff;}.circle-check>input[type="checkbox"]:checked::before {content: "\2713";background-color: #657AFE;border: 1px solid #657AFE;position: absolute;top: 0;left: 0;width: 100%;color: #fff;font-size: 1.1rem;border-radius: 50%;}.circle-check>input[type="checkbox"]:disabled::before {background: #eee;cursor: default;}.square-check>input[type="checkbox"] {width: 1.54rem;height: 1.54rem;display: inline-block;text-align: center;vertical-align: baseline;line-height: 1.54rem;position: relative;outline: none;-webkit-appearance: none;border: 1px solid #fff;-webkit-tab-highlight-color: rgba(0, 0, 0, 0);color: #fff;background: #fff;}.square-check>input[type="checkbox"]::before {content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #999999;color: #fff;}.square-check>input[type="checkbox"]:checked::before {content: "\2713";background-color: #657AFE;border: 1px solid #657AFE;position: absolute;top: 0;left: 0;width: 100%;color: #fff;font-size: 1.1rem;}.square-check>input[type="checkbox"]:disabled::before {background: #eee;cursor: default;}
最后放上效果图
