input单选框的美化

最新推荐文章于 2021-08-25 11:30:30 发布

结城

最新推荐文章于 2021-08-25 11:30:30 发布

阅读量323

点赞数

分类专栏：组件美化文章标签： input单选框的美化

本文链接：https://blog.csdn.net/qq_43487181/article/details/88756000

版权

组件美化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .radio-group{
        margin-bottom: 30px;
    }
    .radio{
        cursor: pointer;
        user-select: none;
    }
    .radio input{
        display: none;
    }
    .radio span{
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
    }
    .radio span:after{
        display: block;
        content: "";
    }
    .radio.checked{
        color: rgb(0, 174, 255);
    }
    .radio.checked span{
        border-color: rgb(0, 174, 255);
        color: white;
		text-align: center;
		line-height: 1em;
    }
    .radio.checked span:after{
        content: "●";
        color: rgb(0, 174, 255);
    }
    .radio.disabled{
        opacity: .5;
        cursor: not-allowed;
    }
    </style>
</head>
<body>

    <div class="radio-group">
        <label class="radio checked">
            <span></span> 审核
        </label>
        <label class="radio">
            <span></span> 未审核
        </label>
    </div>
	
	<div class="radio-group">
	    <label class="radio checked">
	        <span></span> 男
	    </label>
	    <label class="radio">
	        <span></span> 女
	    </label>
	</div>
	<script>
		var radioLis = document.getElementsByClassName('radio');
		for(var i=0;i<radioLis.length;i++){
			radioLis[i].onclick = function (){
				var radio_group = this.parentNode;
				var radioChilds = radio_group.children;
				for(var i=0;i<radioChilds.length;i++){
					radioChilds[i].className = 'radio';
				}
				this.className = 'radio checked'
			}
		}
	</script>
</body>
</html>