htmlradio原⽣样式修改
html radio原⽣样式修改
原理
利⽤标签的for属性，关联到input，通过点击来实现对radio的点击操作。从⽽可以隐藏radio，⽽使⽤其他的标签来展⽰好看的css样式。html代码
<div class="base-info-item family-info-item">
<span><em >*</em>家族病史<i>(长辈亲⼈是否有类型疾病)</i>:   </span>
<label for="wu">
<input name="familyIllness" id="wu" type="radio" value="1">
<span>⽆</span>
</label>
<label for="you">
<input checked name="familyIllness" id="you" type="radio" value="2">
<span>有</span>
</label>
</div>
css代码
.family-info-item {
display: flex;
align-items: center;htmlradio添加切换事件
height: 36px;
}
.family-info-item input {
display: none;
}
.family-info-item input + span {
display: inline-block;
width: 40px;
line-height: 26px;
border-radius: 4px;
background-color: #dddddd22;
text-align: center;
margin-right: 5px;
font-size: 14px;
border: 1px solid #ddd;
}
.family-info-item input:checked + span {
color: #1aa1e4;
border: 1px solid #1aa1e4;
background-color: #1aa1e411;
}
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。