自定义radio单选按钮样式

2019-06-06    标签:html    阅读:594


思路:

1. 可以为<label>元素添加生成性内容(伪元素),并基于单选按钮的状态来为其设置样式;

2. 然后把真正的单选按钮隐藏起来;

3. 最后把生成内容美化一下。


GIF.gif

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
</head>
<body>
<p class="tm2">
    <span>性别:</span>
    <label for="sex1" class="lebel1"><input type="radio" class="sex" name="sex" id="sex1" value="0" > 男 <b></b></label>&nbsp;&nbsp;&nbsp;
    <label for="sex2" class="lebel2"><input type="radio" class="sex" name="sex" id="sex2"  value="1" > 女 <b></b></label>
</p>
<style>
    .tm2{ width: 94%; float: left; margin-left: 3%; height: 2.4rem;margin-bottom: 0.8rem;}
    .tm2 span{font-size: 0.96rem; color: #333333; display:block; width: 4.12rem; height: 2.4rem; line-height: 2.4rem; float: left; text-align: center;}
    .tm2 label{ font-size: 0.9rem; display: inline-block; margin-top: 0.5rem; color: #333; position: relative;}
    .tm2 label b{width: 0.4rem; height: 0.4rem; border:0.24rem solid #fe4971; background: #fff; border-radius: 50%; position: absolute; left: -0.1rem; top: 0.2rem;}
    input[type=radio]:checked+b{ background: red}
</style>
</body>
</html>


【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/138.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

授人以鱼不如授人以渔!授人以鱼只救一时之急,授人以渔则可解一生之需!

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×