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

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