改变单选按钮radio的默认样式

最新推荐文章于 2024-07-29 14:03:25 发布

cwzhsi

最新推荐文章于 2024-07-29 14:03:25 发布

阅读量3.6w

点赞数 6

分类专栏： css 文章标签： radio css

本文链接：https://blog.csdn.net/cwzhsi/article/details/51347964

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

默认的radio的样式很丑，那么如何改变其默认的样式呢？
我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

先来看下效果：

html代码如下:

<div class="choice">
	<label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>
	<label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>
</div>

样式如下:

.choice{
	position: relative;
}
.choice .radio{
	position: relative;
	display: inline-block;
	font-weight: 400;
	color: #0c4757;
	padding-left: 25px;
	cursor: pointer;
}
.choice .radio input{
	position: absolute;
	left: -9999px;
}
.choice .radio i{
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	width: 15px;
	height: 15px;
	outline: 0;
	border: 1px solid #47a8c0;
	background: #9cd9e8;
	border-radius: 50%;
	transition: border-color .3s
	-webkit-transition: border-color .3s;
}
.choice .radio input:checked+i{
	border-color: #0c4757;
}
.choice .radio input+i:after{
	position: absolute;
	content: '';
	top: 3px;
	left: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #47a8c0;
	opacity: 0;
	transition: opacity .1s;
	-webkit-transition: opacity .1s;
}
.choice .radio input:checked+i:after{
	opacity: 1;
}

demo地址：http://zhsisusie.github.io/IFE/Task31_5_8/index.html