CSS3特效-⾃定义checkbox样式
前⾔: 在实际开发过程中，⼤多数时候都不会⽤原⽣的checkbox样式，因为太丑了， 如果我们不⽤任何ui库的话， 就要⼿动写⼀个了， 原理就是将默认的checkbox 的input标签隐藏掉， 然后在与其⼀套的label标签前/后加⼀个checkbox的图标(可以是图⽚，也可以使svg，这⾥我们⽤的svg).
效果图:
代码:
//css
.checkbox{
display: none;
}
.
checkbox+label{
display: inline-block;
width:100%;
position: relative;
}
.checkbox[type=checkbox]:checked+label {
color: #0099FF;
}
.checkbox--after+label:after,
.checkbox--before+label:before
{
content:"";
width:14px;
height:14px;
display: inline-block;
position: absolute;
transform:translateY(-50%);
top:50%;
right:0px;
}
.checkbox--before+label {
padding-left:20px;
}
.checkbox--before+label:before {
left:0px;
}
.checkbox--after+label:after,
.checkbox--before+label:before
{
background:url('data:image/svg+xml,<svg xmlns="/2000/svg"><rect x="0.5" y="3.5" width="13" height="13" rx="2" transform="translate(0 -3)" stroke="#D9DBD9" fill="none"></rect></svg>');
}
.checkbox--after[type=checkbox]:checked+label:after,
.checkbox--before[type=checkbox]:checked+label:before {
background:url('data:image/svg+xml,<svg xmlns="/2000/svg"><g fill="none"><path fill="#09F" d="M11.4 3L5.8 8.727 2.6 5.455 1 7.09 5.
css特效文字
8 12 13 4.636z"></path><rect stroke="#09F" x="0.5" y="0.5" width="13" height="13" rx="2"></rect></g></svg>');
}
//使⽤注意: label要和inputid保持⼀致
<div>
<input id="c1"class="checkbox checkbox--after" type="checkbox"> <label for="c1">checkbox1</label>
</div>
<div>
<input id="c2"class="checkbox checkbox--before" type="checkbox"> <label for="c2">checkbox2</label>
</div>

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