台州温岭做网站请找我们 (专业建站 | 诚信服务) 13958630945 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>做网站步骤>>使用CSS修改radio样式
建站流程
 
建站知识
 
网站建站疑难
 
网站设计_图象处理
 
网站设计_Css样式
 
网站建设_Flash疑难
 
手机网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 做网站步骤 > 使用CSS修改radio样式

使用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命令以及配置