如何更改radio、checkbox选项框背景图? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何更改radio、checkbox选项框背景图?

杨冬芳 2016-06-03 16:11:31 1832

radio单选框默认是圆圈;checkbox复选框默认是正方形;

1、想问一下如何用纯CSS的方法改变选项框样式,比如将圆圈改成五角星或者菱形或者一张图片?

2、我切好图用 background:url("example.jpg")no-repeat;直接更换为何不行?

3、我目前用的是这样的方法,虽然能很好的实现目的,但总感觉不是太好,有点冗杂。希望能请教到更好的方法?

HTML:

   `<div id="yuyue">
        <input type="radio" name="sex" value="" checked="checked" class="sex" />
        <div class="dianji"></div>
        <input type="radio" name="sex" value="" class="sex sex1" />
        <div class="dianji dianji1"></div>
    </div>`

CSS:

yuyue{
            width: 412px;
            height:277px;
            top: 183px;
            left: 116px;
            position: absolute;
            background: url("images/testdrive/refer.png")no-repeat;
        }
.sex{
            width:50px;
            height: 50px;
            top:158px;
            left: 82px;
            position: absolute;
            opacity: 0;
            z-index: 3;
        }
.sex1{margin-left: 94px;}
.dianji{
            width:17px;
            height:17px;
            left:98px;
            top:174px;
            position: absolute;
            background: url("images/testdrive/choose1.png");
            z-index: 2;
        }
.dianji1{margin-left: 90px;}
yuyue input:checked + .dianji{
            background: url("images/testdrive/choose2.png");
        }

最后 为了掌握多种方法,不是纯CSS的也希望指教一下。谢谢回答!

前端开发
分享到
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:26:47

    可以设置input 的visibility为hidden 然后设置一个label for相应的 input 的id
    把你想要的图片填充在label的:after 或者是:before为元素中,然后还可以根据:click 或这:visited 属性去切换相应的图片和样式

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程