用图片代替原始单选按钮

最新推荐文章于 2024-07-12 16:38:52 发布

xiaoerlang715

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量757

点赞数

分类专栏： html 文章标签： css form

本文链接：https://blog.csdn.net/xiaoerlang715/article/details/84850432

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：用图片代替原始单选按钮
思路：制作的过程把原来的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%;}