⾃定义input[type=checkbox]样式
input[type=checkbox] 复选框作为⽹页中常见的⼀种组件， 我们在设计开发过程中，为了页⾯的美观，往往需要设计符合产品的风格样式；
⽽原⽣的复选框样式并不美观，且直接修改它的样式，会发现只可以设置少数的样式，其余样式并没有效果。这时，我们就需要⾃定义checkbox的个性化样式了。
我这⾥简单的介绍两种CSS实现的⽅式：
两种⽅式都使⽤表单元素中的 label 元素和for属性进⾏关联，这样当⿏标点击 label 时，会⾃动选中复选框，这对⽤户体验更友好；
1、 使⽤伪类来实现⾃定义checkbox样式
html布局：
<p>css3改变checkbox默认样式</p>
<div class="checkbox01">
<input type="checkbox" id="checkboxLogin" />
<label for="checkboxLogin">保持登录</label>
</div>
css样式：
/* 第⼀种解决⽅案：css3样式改变checkbox默认样式 */
.checkbox01 input[type=checkbox] + label::before {
content: "\a0";  /* 不换⾏空格 */
display: inline-block;
vertical-align: 2px;
width: 14px;
height: 14px;
margin-right: 5px;
border-radius: 3px;
background-color: #261c19;
text-indent: 2px;
line-height: .65;  /* ⾏⾼不加单位，⼦元素将继承数字乘以⾃⾝字体尺⼨⽽⾮⽗元素⾏⾼ */
}
.checkbox01 input[type="checkbox"]:checked + label::before {
content: "\2713"; /* 对号的 Unicode 编码 */
background-color: #f07000; /* 选中的背景颜⾊ */
}
.
checkbox01 input[type='checkbox'] {
/* 隐藏掉原先实际的 checkbox 框，之所以没⽤ display:none; 这种简单直接的⽅式，
是因为这种⽅法会把它从键盘 tab 键切换焦点的队列中完全删除 */
position: absolute;
clip:rect(0,0,0,0);      /* 隐藏⽅式⼀：裁剪为0 */
/* visibility: hidden; */ /* 隐藏⽅式⼆：隐藏属性 */
}
2、使⽤图⽚来替换checkbox的原⽣样式
html布局：
<p>图⽚代替 checkbox </p>
<div id="check">
<span>
<input type="checkbox" class="input_check" id="check1" />        <label for="check1"></label>
</span>
<label for="check1">保持登录</label>
</div>
css样式：
/* 第⼆种解决⽅案：图⽚代替checkbox */
#check span { position: relative; }
#check .input_check {
position: absolute;
width: 14px;
css鼠标点击样式height: 14px;
visibility: hidden;
}
#check .input_check+label {
display: inline-block;
width: 14px;
height: 14px;
background: url('./images/checked.png') no-repeat;
background-position: -31px -3px;
background-color: #261c19;
border-radius: 3px;
}
#check .input_check:checked+label {
background-position: 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。