Skip to main content

Search and Top Navigation

#15155 closed bug (duplicate)

Opened March 22, 2017 06:51PM UTC

Closed April 03, 2017 05:14PM UTC

Checkbox tick colour wrong in many themes

Reported by: kb-ptti 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

Attachments (0)
Change History (5)

Changed March 22, 2017 11:41PM UTC by kb-ptti comment:1

Experimenting with the Themeroller editor:-

1. The background of the "tick" icon box is set by Clickable: active state > text.

2. The hover colour for the tick is set by Clickable: hover state > icon.

3. The tick colour on button-down when transitioning from ticked to unticked is set by "Clickable: active state" icon.

4. The normal tick colour is set by "Clickable: default state" icon.

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.

Changed March 23, 2017 01:08AM UTC by rjollos comment:2

_comment0: 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.1490232373667300

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

#!text/html
<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.

Changed March 23, 2017 01:34AM UTC by kb-ptti comment:3

Demonstration of bug and fix:-

https://jsfiddle.net/kmbro/yo2991ut/

Changed March 23, 2017 02:05AM UTC by rjollos comment:4

_comment0: 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?1490235166860504
_comment1: Looking for other uses of .ui-button:active, this looks suspicious:- \ \ {{{#!css \ .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?1490235174968004

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?

Changed April 03, 2017 05:14PM UTC by scottgonzalez comment:5

resolution: → duplicate
status: newclosed

Duplicate of #15085.