自定义单选框样式

最新推荐文章于 2024-01-05 09:40:20 发布

玲曦

最新推荐文章于 2024-01-05 09:40:20 发布

阅读量153

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42565994/article/details/105225127

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

		<div class="radio-box">
			<div>
				<input type="radio" name="state" id="state1" value="1" />
				<label for="state1">了解项目</label>
				<input type="radio" name="state" id="state2" value="2" />
				<label for="state2">自己家检测治理</label>						
			</div>
		</div>

css:

input[type="radio"] {
	width: 22px;
	height: 22px;
    opacity: 0;
}
input[type="radio"] + label::before {
    display: inline-block;
	width: 22px;
	height: 22px;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    background: #C5C5C5;
}
input[type="radio"]:checked +  label::before {
    background-color:#416BDB;
    background-clip: content-box;
    border-color:#d1d9f0;
    border-width: 5px;
}