修改radio样式
修改radio默认样式
·
radio默认样式
以谷歌浏览器为例
<div class="box">
<input class="radio" type="radio" name="sex" />男
<input class="radio" type="radio" name="sex" />女
<input class="radio" type="radio" name="sex" />保密
</div>
自带默认margin: 3px 3px 0px 5px
默认框框样式
width: 10px;
height: 10px;
border: 1px solid rgb(118, 118, 118);
border-radius: 50%;
box-sizing: border-box;
选中时的样式
修改radio默认样式
可以设置尺寸和边距
input[type="radio"] {
width: 20px;
height: 20px;
margin: 0;
}
使用appearance: none隐藏默认radio的框框,重写框框样式
原理:通过绝对定位覆盖原多选框
input[type="radio"] {
width: 20px;
height: 20px;
margin: 0 4px 0 0;
appearance: none;
position: relative;
}
示例一:
/** 未被选中的样式*/
input[type="radio"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
/** 选中的样式 */
input[type="radio"]:checked::before {
content: "\2713"; /* 2713表示勾勾✓ */
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #7d7d7d;
border-radius: 4px;
color: #7d7d7d;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 20px;
}
效果图:
示例二:
/** 未被选中的样式*/
input[type="radio"] {
width: 20px;
height: 20px;
margin: 0 4px 0 0;
appearance: none;
position: relative;
background: wheat;
border-radius: 50%;
}
/** 选中的样式*/
input[type="radio"]:checked::before {
content: "";
background: orange;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: none;
border-radius: 50%;
}
效果图:
更多推荐
已为社区贡献4条内容
所有评论(0)