前端的小玩意（4）自定义checkbox或者radio的外观

来源：互联网发布：深入分析linux内核编辑：程序博客网时间：2024/05/18 11:30

原理：

通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去

CSS代码：

    .radio { /*这个描述的是输入框的基本样式，透明，绝对定位，浮动在最下*/        opacity: 0;        position: absolute;        z-index: -1; /*这行是让原图标被其他的遮挡，避免挡住其他按钮影响事件触发*/        <span style="font-family: Arial, Helvetica, sans-serif;">/*  </span>overflow: auto;        我自己试验后感觉这两行代码并没有必要  */    }    .radio[type=checkbox] + span {  /*如果类型是radio，那么这里就是type=radio，当然不写也可以。+span表示这个元素后的第一个span元素*/        display: inline-block;  /*因为需要写span元素的大小*/        height: 20px;   /*图标的大小*/        width: 20px;        background-image: url(01.png);  /*未选中时的图标*/        background-position: center;    /*把背景图放在元素的中间显示*/        position: relative; /*相对定位*/        top: 3px;   /*可能需要根据实际情况来调整位置*/        left: 5px;    }    .radio[type=checkbox]:checked + span { /*选中时的样式*/        background-image: url(02.png);    }

HTML代码：

<label>    <input type="checkbox" class="radio" name="TableChecked"/>    <span></span>    <span>选择磁盘</span>   <!--这个是描述这个checkbox的label内容--></label>

0 0