layUI修改多选框及单选框选中样式的颜色

最新推荐文章于 2024-07-02 16:57:53 发布

啦啦啦晨啦啦

最新推荐文章于 2024-07-02 16:57:53 发布

阅读量2.4w

点赞数 7

分类专栏： web前端文章标签： layUI 多选框颜色修改单选框颜色修改复选框颜色修改

本文链接：https://blog.csdn.net/weixin_41517724/article/details/93746558

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

layUI修改多选框选中样式的颜色

1.原来的layui多选框选中以后是绿色的
在这里插入图片描述

2.我们F12找到该复选框的 i 标签，然后修改掉默认的改为你需要的颜色
在这里插入图片描述
3.这里我们在我们的css文件里加上下面代码，用 !important 替换掉以前的

.layui-form-checked[lay-skin=primary] i{
    border-color:#597FC0 !important;
    background-color:#FFF !important;
    color:#597FC0 !important;
    font-weight: bold;
}

4.最后：看效果
在这里插入图片描述
同样单选框也是这样，记得也得加上 !important ,不然覆盖不了原来的颜色哦

还有一个问题就是鼠标悬浮上去以后还是绿色，这里也是加上样式修改即可

.layui-form-checkbox[lay-skin=primary]:hover i{
    border-color:#597FC0 !important;
}
.layui-form-radio>i:hover, .layui-form-radioed>i{
    color: #597FC0 !important;
}