radio样式改造
项目中经常有要求把radio做的美观，苦于干不掉原有样式，于是尝试一下写了简单demo，话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<title>radio样式设定</title>
<style type="text/css">
.radio-item {
position: relative;
}
.radio-item.inline {
display: inline;
}
label input[type='radio']{
visibility: hidden;
}
label div{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
border: 1px solid #ccc;
left: -3px;
}
label div:before {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 1;
left: 50%;
background-color: green;
top: 50%;
transform: translate(-50%,-50%);
}
label input[type='radio']:checked + div:before {
content: "";
background-color: red;
}
</style>
</head>
<body>
<form>
<div class="radio-item inline">
<label>
<input type="radio" name="fruit" value="banana">banana
<div></div>
</label>
</div>
<div class="radio-item inline">
<label>
<input type="radio" name="fruit" value="juzi">juzi
<div></div>
</label>
</div>
</form>
</body>
</html>
复制代码
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
