Customize style for jQuery UI checkbox

Question

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

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

Am I doing something wrong?

First solution.. I think too much spaces. if that classes from one element it shout be without spaces. for example .ui-checkboxradio-checked.ui-state-active Second solution should work after hard refresh (ctrl + f5 or ctrl + shit+ r for chrome) — Arnoldas
– Arnoldas, Commented Oct 26, 2017 at 13:57

Arnoldas · Accepted Answer · 2017-10-26 14:05:58Z

3

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

and don't forget hard refresh

answered Oct 26, 2017 at 14:05

Arnoldas

3172 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sc28 Over a year ago

Thanks for catching this! It was indeed the spacing preventing the class to be applied, even the !important was redundant after this. I usually disable cache during development in Chrome to avoid related issues.

Collectives™ on Stack Overflow

Customize style for jQuery UI checkbox

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related