通过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 -3px; z-index: 1;} 
.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;}

这个是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中用到的图片

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值