更改layui 默认单选框radio样式

更改后效果展示:

 

html:


   

     

自定义样式


     

       
单选框

       

         
         
       

     

   

 


css:

.layui-form-radio i {
  top: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border: 1px solid #d2d2d2;
  font-size: 12px;
  border-radius: 2px;
  background-color: #fff;
  color: #fff !important;
}
.layui-form-radioed i {
  position: relative;
  width: 18px;
  height: 18px;
  border-style: solid;
  background-color: #0066b3;
  color: #0066b3 !important;
}
/* 使用伪类画选中的对号 */
.layui-form-radioed i::after, .layui-form-radioed i::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.layui-form-radioed i::before {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 7px;
  transform: rotate(-135deg);
}


————————————————
版权声明:本文为CSDN博主「katy_1」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/katy_1/article/details/101723575

你可能感兴趣的:(layui,前端,javascript)