纯css美化单选按钮

最新推荐文章于 2022-09-07 23:50:29 发布

蓝色的乌鸦

最新推荐文章于 2022-09-07 23:50:29 发布

阅读量2.4k

点赞数

分类专栏： css 网页布局文章标签： css美化单选按钮单选按钮纯css

本文链接：https://blog.csdn.net/wangkadm/article/details/50717615

版权

网页布局同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>

<title>纯CSS3实现自定义美化单选框</title>
<style type="text/css">
body {
	background: #fff;
	padding: 0; margin: 0;
}
.regular-radio{
	display: none;
}
.regular-radio + label {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked + label:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-radio:checked + label {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

</style>

</head>
<body>
<div id="holder">
	<div>
		<div class="tag">Radio Small</div>
		<div class="button-holder">
			<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" /><label for="radio-1-1"></label><br />
			<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
			<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
			<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
		</div>
	</div>
</div>
</body>
</html>

内容有所删减

来自

http://www.html5tricks.com/css3-checkbox-radiobox.html

蓝色的乌鸦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css美化单选按钮

纯CSS3实现自定义美化单选框body { background: #fff; padding: 0; margin: 0;}.regular-radio{ display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px soli
复制链接

扫一扫