自定义jQuery UI复选框的样式 [英] Customize style for jQuery UI checkbox

问题描述

我正在使用没有图标的jQueryUI复选框，但是找不到如何修改/覆盖的方法使用CSS的复选框样式.

I'm using jQueryUI checkboxes without icon but cannot find how to modify/override the checkbox style using CSS.

例如，我想在选中"按钮上添加红色边框，但是以下CSS不起作用(我从"DevTools元素"窗格中推导出了类):

For example I'd like to add a red border on "checked" buttons, but the following CSS doesn't work (I deduced the classes from the 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;
}

我还尝试直接修改输入的已检查"状态的样式，也没有任何作用:

I also tried modifying the style of the input's "checked" state directly, also with no effect:

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

我做错什么了吗?

推荐答案

我检查了示例链接.所有类都放在一个元素中，所以应该这样(没有空格):

I cheked example link. All classes in one element, so it shoud be like that(without spaces):

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

别忘了硬刷新

这篇关于自定义jQuery UI复选框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！