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

Question

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的也希望指教一下。谢谢回答！

Answer 1

看了下你的问题，我写了个 demo 你看看吧！传送门

Answer 2

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

Answer 3

我觉得改变input的样式，还得在label上做文章，label的for属性可以关联一个input元素。具体请看这[http://segmentfault.com/a/1190000003711140]

Answer 4

嗯，用label标签代替你的div，这是语意上推荐的方法；
给每一个表单元素都加上label标签，如果不需要显示就设置hidden属性；
然后通过给label标签设置样式，通过隐藏input[type="radio"]和input[type="checkbox"]来实现自定义的单选、多选样式；
对于多选择和单选框的情况，尽可能的不要用label标签包含input[type="radio"]和input[type="checkbox"]，由于冒泡，在获取选中状态的时候，会返回两个值；