p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-
<p>您的性别:</p>
<div class="radio-sex">
<input type="radio" id="sex1" name="sex">
<label for="sex1"></label>
<span>男</span>
</div>
<div class="radio-sex">
<input type="radio" id="sex2" name="sex">
<label for="sex2"></label> 女
</div>
<style>
.radio-sex {
position: relative;
display: inline-block;
margin-right: 12px;
}
.radio-sex input {
vertical-align: middle;
margin-top: -2px;
margin-bottom: 1px;
/* 前面三行代码是为了让radio单选按钮与文字对齐 */
width: 20px;
height: 20px;
appearance: none;/*清楚默认样式*/
-webkit-appearance: none;
opacity: 0;
outline: none;
/* 注意不能设置为display:none*/
}
.radio-sex label {
position: absolute;
left: 0;
top: 0;
z-index: -1;
/*注意层级关系,如果不把label层级设为最低,会遮挡住input而不能单选*/
width: 20px;
height: 20px;
border: 1px solid #3582E9;
border-radius: 100%;
}
.radio-sex input:checked+label {
background: #3582E9;
}
.radio-sex input:checked+label::after {
content: "";
position: absolute;
left: 8px;
top: 2px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
</style>
沃梦达教程
本文标题为:一个radio选项卡美化的css代码示例
猜你喜欢
- Bootstrap .btn-primary类 1970-01-01
- Bootstrap单选按钮 1970-01-01
- 原始CSS美化select下拉框option示例代码 2022-10-05
- Bootstrap创建下拉菜单 1970-01-01
- Bootstrap表格行或单元格 1970-01-01
- D3.js selectAll()用法 2022-07-13
- Bootstrap navbar-fixed-bottom类使用 1970-01-01
- D3.js数组API 1970-01-01
- js过滤所有特殊字符的实例代码 2022-10-16
- Bootstrap .well类 1970-01-01