自定义 jQuery UI 复选框的样式

Question

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

例如，我想在“选中”按钮上添加红色边框，但以下 CSS 不起作用（我从 DevTools 元素窗格中推断出类）：

.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;
}

我也试过直接修改输入的“checked”状态的样式，同样没有效果：

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; 
}

别忘了硬刷新