radio圆框变方框

最新推荐文章于 2024-04-30 16:39:26 发布

php_kevlin

最新推荐文章于 2024-04-30 16:39:26 发布

阅读量7.1k

点赞数

分类专栏： tp5常用功能

本文链接：https://blog.csdn.net/kevlin_V/article/details/115321990

版权

tp5常用功能专栏收录该内容

35 篇文章 1 订阅

订阅专栏

<html>
<head>
<style>
    .radio{
        top: 12px;
        position: absolute;
        background-image: url("./icon.png");
        background-color: #00A5E3;
        width: 18px;
        height: 18px;
        background-position: -1px -260px;
        background-repeat: no-repeat;

    }
    .radioavtive{
        background-position: -77px -260px;
    }
    .box{
        display: flex;
    }
    .box input{
        z-index: 10;
    }
</style>
</head>
<body>



<div class="box">
    性别：
    <div>
        <div class="radio" id="sex">
        </div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(0)">男
    </div>
    <div >
        <div class="radio" style="">
        </div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(1)">女
    </div>
</div>
<!--<div class="radio"   >-->
<!--<input style="opacity: 0" type="radio" name="sex" value="1" οnclick="show()">男-->
<!--</div>-->
<!--<div class="radio">-->
<!--    <input style="opacity: 0" type="radio" name="sex" value="2"  οnclick="show()">女-->
<!--</div>-->
</body>
<script>
    function show(type)
    {
        // alert(1);

        var item = document.getElementsByClassName('radio')
        console.log(item)
        item[0].className = "radio"
        item[1].className = "radio"
        item[type].className = "radio radioavtive"
        // item.setAttribute("class","rediocheck");
    }

</script>
</html>