使用CSS3实现input多选框自定义样式的方法示例

原理：首先把input元素隐藏掉，然后用css设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无禾字组词须使用图片和js

效果预览

html代码

 <div class="radio">    <input type="checkbox" id="x1">    <label for="x1"></label>    男</div><div class="radio">    <input type="chelook过去式ckbox" id="x2">    <label for="x2"></label> 女</div>

css代码

.radio {    position: relative;    display: inline-block;    margin-right: 12px;}.radio input {    width: 15px;    height: 15px;    appearance: none;/*清楚默认样式*/    -webkit-appearance:生态环境治理 none;    opacity: 0;    outline: none;    z-index: 8; /*让input层级高于label，使之能选dnf召唤师装备中*/    }.radio label {    position: absolute;  陆军勤务学院  left: 0;    top: 6px;    width: 15px;    height: 15px;    border: 1px solid #3582e9;}.radio input:checked+label::after {    content: "";    position: absolute;    left: 4px;    top: 0px;    /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */    width: 5px;    height: 12px;    border-right: 1px solid #000000;    border-bottom: 1px solid #000000;    transform: rotate(45deg);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。