摘要:本篇教程讲解了如何利用CSS3修改input[type=radio]样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
原理
利用<label>标签与对应的<input>关联,给<input>设置透明,使用position(定位)让用户看到的是<label>标签的样式,点击<label>时会选择到对应的<input>,使用<input>的:checked伪类选择器来改变选中<label>的样式.
实现代码
html
<form> <div> <input id="item1" type="radio" name="item" value="选项一" checked> <label for="item1"></label> <span>选项一</span> </div> <div> <input id="item2" type="radio" name="item" value="选项二"> <label for="item2"></label> <span>选项二</span> </div></form>
css
div { position: relative; line-height: 30px; } input[type="radio"] { width: 20px; height: 20px; opacity: 0; } label { position: absolute; left: 5px; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #999; } /*设置选中的input的样式*/ /* + 是兄弟选择器,获取选中后的label元素*/ input:checked+label { background-color: #fe6d32; border: 1px solid #fe6d32; } input:checked+label::after { position: absolute; content: ""; width: 5px; height: 10px; top: 3px; left: 6px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) }
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML5/CSS3频道,获取更多WEB前端知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号