jquery - 为 jQuery UI 复选框自定义样式

Question

我正在使用 jQueryUI checkboxes without icon但找不到如何使用 CSS 修改/覆盖复选框样式。

例如，我想在“已选中”按钮上添加红色边框，但以下 CSS 不起作用(我从 DevTools Elements Pane 中推断出类):

.ui-checkboxradio-label .ui-corner-all .ui-button .ui-widget .ui-checkboxradio-checked .ui-state-active {
    border: 2px solid rgb(255,0,0) !important;
}

.checkbox-noicon .ui-checkboxradio .ui-helper-hidden-accessible {
    border: 2px solid rgb(255,0,0) !important;
}

我还尝试直接修改输入的“选中”状态的样式，同样没有效果:

input[type=checkbox]:checked {
    border: 2px solid rgb(255,0,0) !important;
}

我做错了什么吗？

Answer 1

我检查了示例链接。一个元素中的所有类，所以它应该是这样的(没有空格):

.ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-checked.ui-state-active{
     border: 2px solid rgb(255,0,0) !important; 
}

不要忘记硬刷新