用图片代替原始单选按钮

最新推荐文章于 2021-06-04 08:50:20 发布

原创最新推荐文章于 2021-06-04 08:50:20 发布 · 852 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #form

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用图片替换传统单选按钮的方法，通过隐藏原始的input选框并使用背景图片来实现选中状态的视觉效果。具体实现上，利用HTML和CSS，将input设置为不可见，并在其上叠加一个div元素作为图片容器。

需求：用图片代替原始单选按钮
思路：制作的过程把原来的input选框隐藏，然后给他一个背景图片当他选中的时候替换背景图片
Webuploader
html代码

  <label>
   <input type="checkbox" id="check"/>
   <div></div> 
   <span>记住密码</span>
    </label>

Css样式

  body{background:#ccc;}
        label{position:relative;padding-left:65px;}
        label input[type='checkbox']{display:inline-block;opacity:0;position:absolute;}
        label input[type='checkbox']+div{width:65px;height:66px;background:#fff;top:0;}
        label input[type='checkbox']:checked+div{background:url(img/duihao.jpg) no-repeat 100%;}