首页 > 代码库 > 自定义radio
自定义radio
想实现一个这种效果的radio样式怎么弄?
只用html和css
<label class="radio-v2"> <input type="radio" name="c"> <span></span>自动弹出 </label> <label class="radio-v2"> <input type="radio" name="c"> <span></span>不自动弹出 </label> <label class="radio-v2"> <input type="radio" name="c" disabled> <span></span>禁用 </label>
.radio-v2 { margin-right: 30px; font-weight: normal; } .radio-v2 input { opacity: 0; z-index: 2; } .radio-v2 span { position: relative; display: inline-block; vertical-align: top; margin-left: -20px; width: 20px; height: 20px; border-radius: 500px; border: 1px solid #AAB8D4; margin-right: 5px; text-align: center; } .radio-v2:hover span { border-color: #4A5FE2; } .radio-v2 input[type=radio]:checked + span:before { position: absolute; content: ""; width: 12px; height: 12px; top: 50%; left: 50%; margin-top: -6px; margin-left: -6px; border-radius: 500px; opacity: 1; transition: color 0.3s ease-out; background-color: #4A5FE2; } .radio-v2 input[type=radio]:checked + span { border-color: #4A5FE2; } .radio-v2 input[type=radio]:disabled + span { border-color: rgba(162, 162, 162, 0.12) !important; cursor: not-allowed; } .radio-v2 input[type=radio]:disabled + span:before { background-color: rgba(162, 162, 162, 0.12); }
首先看结构,是label里面套了一个input和一个空的span。
input要通过opacity: 0;隐藏起来。
用span来制作所需要的样式,span画外边框,span加个before伪类来画里面的小圆圈。
通过相邻兄弟选择器来控制选择与不选择的状态input[type=radio]:checked + span:before 。
看看代码,很简单,你会了么?
自定义radio
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。