使用CSS修改radio样式

_180次浏览

2022-03-13

<div class="opt" ><input class="magic-radio" type="radio" name="hb" value="111"><label></label></div>
Css
.magic-radio{
position: absolute;z-index:9;
appearance: none;
-webkit-appearance: none;
}

.magic-radio + label {
position: relative;
display: block;
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
padding-left: 1.5rem !important;
min-width: auto !important;
}
.magic-radio:checked + label:before {
background:#6bb6bf;
border-color: #6bb6bf;
}
.magic-radio + label:before {
border-radius: 0px;
}
.magic-radio + label:before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 25px;
height: 25px;
content: '';background:#fff;
border: 1px solid #c0c0c0;

}

.magic-radio:checked + label:after{
display: block;
}
.magic-radio + label:after {
top: 5px;
left: 10px;
box-sizing: border-box;
width: 8px;
height: 15px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #fff;
border-top: 0;
border-left: 0;

}
.magic-radio + label:after{
position: absolute;
display: none;
content: '';
}

Jquery

$(".opt").click(function(){
$('input[name="hb"]').each(function(){
$(this).removeAttr("checked",false);
});
$(this).find("input[type=radio]").prop("checked",true);
});

页面所在本站地址: http://www.52-life.net/N_radio_css.htm

上一篇 >>多维数组按某字段排序(PHP)

下一篇 >>nginx命令以及配置