通过css实现单选按钮效果
刚刚⼊门（可能还没⼊门）的⼩前端，遇见两次实现单选按钮的效果，如下：
现在总结⼀下实现这两种样式的代码。
第⼀种：
<form action="#">
<div class=" info ">
<div class="radiobox ">
<input type="radio" id="person1" checked="checked" name="userType" />
<span></span>
</div>
<p class="text">借款⼈</p>
</div>
<div class=" info">
<div class="radiobox">
<input type="radio" id="person2" name="userType" />
<span></span>
</div>
<p class="text">投资⼈</p>
</div>
</form>
.
radiobox{ display: inline-block; position: relative; top: 46px; width: 13px; height: 13px; background: url(../img/chooseBtn.png) no-repeat;}
/* 单选框 */
.radiobox input{ opacity: 0; position: relative; top: -3px; left: 0; width: 100%; height: 100%; z-index: 100;}
.radiobox span{ /*display: block;*/ width: 7px; height: 7px; border-radius: 100%; position: absolute; background: #f24b41; top: 50%; left: 50%; margin: -4px 0 0 -3p .radiobox input[type="radio"] + span{ opacity: 0;}/* 这⼀⾏和下⼀⾏形成单选的效果 */
.radiobox input[type="radio"]:checked+span{ opacity: 1;}
.text{ position: relative; top: -25px; left: 5px; height: 14px; margin-left: 32px; padding-top: 46px; padding-bottom: 12px;  color: #816b6b; font-size: 14px;}
htmlradio设置默认的按钮
这个是css中需要的图⽚。
第⼆种：
<form action="#">
<div class="info">
<div class="radiobox">
<input type="radio" id="quest01-chose01" checked="checked" name="quest01" />    <span></span>
</div>
<p>28-35岁</p>
</div>
<div class="info">
<div class="radiobox">
<input type="radio" id="quest01-chose02" name="quest01" />
<span></span>
</div>
<p>18-28岁</p>
</div>
</form>
.info {
line-height: 36px;
}
.radiobox {
position: relative;
top: 9px;
float: left;
width: 16px;
height: 16px;
border-radius: 100%;
}
.radiobox input {
position: relative;
top: -7px;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
.radiobox span {
position: absolute;
top: 0;
width: 15px;
height: 15px;
border: 1px solid #666;
background: url(../img/radiobg02.png);
z-index: 1;
border-radius: 100%;
}
.radiobox input[type="radio"]:checked + span {
border-color: #ffbc03;
background: url(../img/radiobg.png);
}
.info p {
width: 565px;
line-height: 36px;
margin-left: 28px;
color: #666;
font-size: 14px;
}
css中⽤到的图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。