单击单选按钮换成图片 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <style>
            label {
                /*设置label的样式*/
                width: 100%;
                padding: 10px 0px;
                display: block;
                line-height: 20px;
                position: relative;
                font-weight: normal;
            }
            
            .radio .option {
                /*把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。*/
                width: 25px;
                height: 25px;
                position: absolute;
                top: 10px;
                left: 0px;
                background-size: cover;
                background: url(img/03.png) no-repeat;
                background-size: cover;
            }
            
            .radio input[type="radio"] {
                /*为了保险起见，把原生样式隐藏掉*/
                display: inline-block;
                margin-right: 15px;
                opacity: 0;
            }
            
            input[type="radio"]:checked+div {
                /*当radiuo被选中时，把input下边的div标签的背景图片替换掉*/
                background: url(img/horn.png) no-repeat;
                background-size: cover;
            }
        </style>
    </head>

    <body>
        <!--HTML代码结构如下：-->
        <div class="radio">
            <label>
        <input type="radio" name="sex" value="" />
        <div class="option"></div><!--该div盛放的是优化后的按钮图片-->
        <span class="opt-text">男</span>
    </label>
        </div>
        <div class="radio">
            <label>
        <input type="radio" name="sex" value="" />
        <div class="option"></div><!--该div盛放的是优化后的按钮图片-->
        <span class="opt-text">女</span>
    </label>
        </div>
    </body>

</html>

 

posted @ 2018-12-12 17:18  webxy  阅读(1906)  评论(1)  编辑  收藏  举报