纯css3单选框美化样式

最新推荐文章于 2025-05-30 12:42:00 发布

原创最新推荐文章于 2025-05-30 12:42:00 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS样式 #单选框美化 #网页制作 #HTML

本文介绍了一种通过CSS隐藏原始单选框并进行外观美化的方法，包括如何使用伪元素和属性选择器实现自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先将原单选框隐藏：display：none；

再美化。

<div class="select_btn">
	    <input type="checkbox" id="checkbox_meihua" class="checkbox_style" name="select" value="10天内自动登录" checked="checked">
		<label for="checkbox_meihua"></label>
</div>

	.select_btn{font-size:  14px ;padding: 0px 30px;margin-top: 5px;}
	.checkbox_style{display: none;}     //先隐藏
	label{display: inline;}
	.checkbox_style + label{
		background-color: #FFF;
		border: 1px solid #e2e2e2;
		padding: 7px;
		display: inline-block;
		position: relative;
		float: left;
	}
	.checkbox_style:checked + label{
		background-color: #fff;
		border: 1px solid #e5e5e5;
		color: #243441;
	}
	.checkbox_style:checked + label:after{
		content: ' \2714';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		padding: 0 0 1px;
		color: #758794;
		text-align: center;
		font-size: 12px;
	}