Opened 6 years ago
Closed 6 years ago
#15155 closed bug (duplicate)
Checkbox tick colour wrong in many themes
Reported by: | Kevin Broadey | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.checkbxoradio | Version: | 1.12.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Go to http://jqueryui.com/themeroller, scroll down to the Controlgroup sample and click on the "Insurance" checkbox. The tick comes and goes in black as you click, which is what you'd expect. (Though, to be really picky, I'd want to see it turn grey on the button-down event before going blank on button-up, but I digress...)
Now use the Gallery to try different themes. In some cases you can't see the tick because its in the same colour as the background. For example...
UI lightness: icon background is a dark yellow and the tick cannot be seen
UI darkness: tick is barely-visible grey on white, and changes to white-on-white on hover. Turns black on button-down in transition from ticked to unticked.
Start: barely-visible blue on white, changing to very visible blue on white on hover.
Le Frog: white-on-white at all times
Dark Hive: barely-visible grey-on-white, changing to white-on-white on hover. Strong black on button-down on transition from ticked to unticked.
At this point I stopped checking!
Tested on a MacBook Pro 2016 running macOS Sierra 10.12.3. Google Chrome 56.0.2924.87 Firefox 51.0.1 Safari 10.0.3
Change History (5)
comment:1 Changed 6 years ago by
comment:2 Changed 6 years ago by
No. Setting the background colour is the wrong fix. The tick needs to be in the Clickable: active state colour, not the default state colour. The HTML for the checkboxradio checkbox item is this. Note that we have ui-button
and ui-state-active
in the class list for <label>
while ui-icon is in the first enclosed <span>
.
<label for="messages-totems-newsfeed" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"></span> <span class="ui-checkboxradio-icon-space"> </span> Newsfeed </label>
Now look at the jquery-ui.css file from themeroller. It contains this:-
.ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("images/ui-icons_222222_256x240.png"); } ... .ui-button .ui-icon { background-image: url("images/ui-icons_cccccc_256x240.png"); }
The second of these rules is firing because it matches as closely as ".ui-state-active .ui-icon" but is appears later. The ".ui-button:active .ui-icon" does not fire because the ":active" pseudo-class isn't present. The correct fix is to use:-
.ui-state-active .ui-icon, .ui-button.ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("images/ui-icons_222222_256x240.png"); }
This will sort out any other non-button elements that use .ui-button
styling.
comment:4 Changed 6 years ago by
Looking for other uses of .ui-button:active
, this looks suspicious:-
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #e86838; background: #d85828 url("images/ui-bg_inset-soft_30_d85828_1x100.png") 50% 50% repeat-x; font-weight: bold; color: #ffffff; }
Do we need .ui-button .ui-state-active
in the selector list too?
Experimenting with the Themeroller editor:-
The fundamental flaw is in using the active text colour for the icon box background. This is almost always going to fail in themes where the background colour is darker than the text colour. If you look at the Button examples for the "UI darkness theme" then you'll see what I mean: the button background is dark (set by Clickable: default state > background) so the text and icon (Clickable: default state > text and > icon respectively, which seems eminently reasonable) is light. However, Clickable: active state: background is also dark so Clickable: active state: text has to be light, making it the wrong choice for the tick's background.
I think the background needs to be set from Clickable: active state > border. This would make it consistent with what you're doing with radio buttons.