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

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

效果预览

ht ML 代码

 <div class="radio">
    <input ty PE ="checkbox" id="sex1">
    <label for="sex1"></label>
    男
</div>
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女
</div>

CSS代码

.radio {
    pos IT ion: relative;
    dis play : inline-block;
    m arg in-right: 12px;
}

.radio input {
    width: 15px;
    h ei ght: 15px;
    appearance: none;/*清楚默认样式*/
    - webkit -appearance: none;
    opacity: 0;
    outline: none;
    z -i ndex: 8; /*让input层级高于label，使之能选中*/
    
}

.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(45 deg );
}

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

总结

以上是 为你收集整理的 使用CSS3实现input多选框自定义样式的方法示例 全部内容，希望文章能够帮你解决 使用CSS3实现input多选框自定义样式的方法示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于使用CSS3实现input多选框自定义样式的方法示例的详细内容...