自定义radio单选按钮样式

2019-06-06    标签:html    阅读:141    评论:0


思路:

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>


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

文章评论(0)

登录

博主信息

头像

生活很平淡,也很烦躁,如果您每天都能学到新东西,您就可以每天教别人新东西,今天的辛苦,是为了明天的更好。

职业:Web攻城狮

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

846运行天数

222文章数量

网站程序:ThinkPHP5
主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

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