如何禁用复选框hover时出现、检查器中无法显示的box-shadow阴影？

解决方法 #

• 你看到的蓝色阴影大概率不是自定义的box-shadow，而是浏览器给交互元素默认添加的悬浮/聚焦outline轮廓，很多情况下会被误认成阴影，直接强制覆盖所有相关属性即可：

.treejs .treejs-checkbox,
.treejs .treejs-checkbox:hover,
.treejs .treejs-checkbox::before,
.treejs .treejs-checkbox:hover::before {
    /* 关闭浏览器默认轮廓，这是最常见的蓝色阴影来源 */
    outline: none !important;
    /* 强制清空所有box-shadow设置 */
    box-shadow: none !important;
    /* 清空原生表单元素默认样式，完全接管自定义样式渲染 */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

• 如果修改后阴影依然存在，排查是否是父节点hover状态触发的子元素样式，你当前贴的代码仅覆盖了选中状态的样式，需补充父节点悬浮时的复选框样式覆盖：

.treejs .treejs-node:hover > .treejs-checkbox::before {
    box-shadow: none !important;
}

• 如果存在样式优先级冲突，可以在自定义样式的选择器前加更高优先级的前缀（比如页面根元素的id、class），提升自定义样式的权重。

内容的提问来源于stack exchange，提问作者Usteena