单击单选按钮换成图片

最新推荐文章于 2020-06-10 10:58:37 发布

weixin_30894389

最新推荐文章于 2020-06-10 10:58:37 发布

阅读量652

点赞数

文章标签： java c# javascript ViewUI

原文链接：http://www.cnblogs.com/gxywb/p/10109513.html

版权

<!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>

转载于:https://www.cnblogs.com/gxywb/p/10109513.html

weixin_30894389

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
单击单选按钮换成图片

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-2.1.4.min.js...
复制链接

扫一扫