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

「爱情、让人受尽委屈。」 2022-09-21 13:13 115阅读 0赞

原理：

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

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>   
    </label>

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关前端的小玩意（3）禁止元素被选中

（28）禁止元素被选中在css的样式表里，添加这样属性（可兼容所有浏览器） { -moz-user-select: -moz-none;

傷城~/ 2022年09月21日 13:13/ 0 赞/ 189 阅读

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

原理：通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去 CSS代码： .radio { /这个描述的是输入框的基本样式，透明，绝对定位，浮动在

「爱情、让人受尽委屈。」/ 2022年09月21日 13:13/ 0 赞/ 116 阅读

相关前端的小玩意（2）jQuery的选择器大全

(34)选择器 ①普通选择方法，略 ②选择其中的c，要求是b里的c <div class="a"> <div class="b">

╰+攻爆jí腚メ/ 2022年09月21日 11:38/ 0 赞/ 137 阅读

相关前端的小玩意（6）——使用padding的左定宽、右自适应布局

①情景：有一父容器div，其高和宽不定，称之为P；该父容器有两个子div，左右布局，左定宽，满高，右自适应剩余区域；其中，定宽称之为A，变宽称之为B； A和B是等

拼搏现实的明天。/ 2022年07月21日 01:08/ 0 赞/ 157 阅读

相关前端的小玩意（10）CSS3的:nth选择器

原文来源于： http://www.w3cplus.com/css3/pseudo-class-selector 的编号三给没有使用过人的说明： ①带

本是古典何须时尚/ 2022年07月15日 23:08/ 0 赞/ 162 阅读

相关前端的小玩意（13）——获取DOM的位置相关信息

Github的DEMO地址： https://github.com/qq20004604/some\_demo/tree/master/%E5%85%B3%E4%BA%8Ec

「爱情、让人受尽委屈。」/ 2022年07月15日 15:49/ 0 赞/ 124 阅读

相关 2017百度前端技术学院-自定义checkbox/radio

转载自：http://www.jianshu.com/p/0e2a67cde03d 一. label标签 1. 概念： `HTML <label>`元素

た入场券/ 2022年07月10日 04:22/ 0 赞/ 152 阅读

相关继续聊WPF——自定义CheckBox控件外观

上一篇文章中谈到了BulletDecorator控件，就是为自定义CheckBox控件的模板做准备，因为CheckBox需要比较严格的布局，正好，BulletDecor

柔情只为你懂/ 2022年06月16日 07:41/ 0 赞/ 276 阅读

相关自定义radio

做了一个简单的自定义radio的样式基于mui和jq ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

╰半夏微凉°/ 2022年03月30日 09:30/ 0 赞/ 197 阅读

相关 html自定义checkbox radio select —— checkbox radio篇

前些日子，所在公司项目的UI做了大改，前端全部改用 [Bootstrap][] 框架，Bootstrap的优缺点在此就不详述了，网上一大堆相关资料。前端的设计就交给我和另一

深藏阁楼爱情的钟/ 2022年03月18日 11:58/ 0 赞/ 310 阅读