自定义jQuery UI样式复选框

时间:2017-10-26 13:53:07

标签: jquery css jquery-ui

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

例如,我想在"检查"上添加红色边框。按钮,但以下的CSS不起作用(我从DevTools Elements窗格中推断出了类):

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

我做错了吗?

1 个答案:

答案 0 :(得分:2)

我的示例链接。一个元素中的所有类,所以它应该是那样的(没有空格):

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

并且不要忘记努力刷新