单选按钮自定义样式

最新推荐文章于 2024-01-24 11:11:12 发布

andou3109

最新推荐文章于 2024-01-24 11:11:12 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/lyyj/p/9916281.html

版权

主要源代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮自定义样式</title>
</head>
<style>
.evelation_select .radio{
margin-right:30px;
color: #555;
font-size: 14px;
cursor: pointer;
}
.evelation_select .radio input{
display:none;
}
.evelation_select .radio .box{
background-color: #fff;
border: 1px solid #ddd;
display: inline-block;
height: 14px;
margin-top: -3px;
vertical-align: middle;
width: 14px;
line-height: 1;
border-radius: 8px;
}
.evelation_select .radio input + .box:after {
background-color: #ff9933;
content: "";
display: inline-block;
height: 8px;
margin: 3px;
width: 8px;
opacity: 0;
border-radius: 4px;
transition: opacity .1s;
-webkit-transition: opacity .1s;
}
.evelation_select .radio input:checked + .box:after{
opacity: 1;
}
</style>
<body>
<div class="evelation_select">
<label class="radio">
<input type="radio" name="evaluate_type" checked="checked" class="eval_radio" data-type="0">
<span class="box"></span>
全部<span>(666)</span>
</label>
<label class="radio">
<input type="radio" name="evaluate_type" data-type="1" class="eval_radio">
<span class="box"></span>
单个<span>(666)</span>
</label>
<label class="radio">
<input type="radio" name="evaluate_type" data-type="2" class="eval_radio">
<span class="box"></span>
单个<span>(666)</span>
</label>
<label class="radio">
<input type="radio" name="evaluate_type" data-type="3" class="eval_radio">
<span class="box"></span>
单个<span>(666)</span>
</label>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/lyyj/p/9916281.html

andou3109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选按钮自定义样式

主要源代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>单选按钮自定义样式</title></head><style> .evelation_select .radio{ margin-right...
复制链接

扫一扫