关于input[type=radio]的样式问题

hsc958 2017-11-02 03:07:56

如题如图，这种radio的单选框样式如何写，求大神代码

...全文

254 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

一本正经的猪 2017-11-03

打赏
举报

我做过一个类似的，我改变的是复选框的样式，可以参考一下 http://blog.csdn.net/zzzzzxping/article/details/62046668

天际的海浪 2017-11-02

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
input[type=radio] {
	display: none;
}
input[type=radio]+span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	font-size: 16px;
	border: 1px solid #999;
	background-color: #fff;
	color: #fff;
	cursor: pointer;
}
input[type=radio]:checked+span {
	border: 1px solid #9cf;
	background-color: #06f;
	color: #fff;
}
</style>
</head>
<body>

<label><input type="radio" name="test" checked="checked" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>

</body>
</html>