[Checkbox] - Review Issues with Colors on Focus

[avalanche1]

.slider and .toggle don't change color and remain grey if toggled by pressing enter or spacebar.
If you click anywhere on the page after that - color appears...
Don't know about regular .checkbox - needs testing.

[avalanche1]

Also, if I toggle it by clicking, then tab away to next field, then tab back - instead of blue it becomes gray!

[jlukic]

This seems to be an issue with browser being lazy at updating css with pseudo selectors like :checked. You can see in debugger although the element is already :checked the selector isnt applied until "something" happens. Usually hover over the checkbox.

[avalanche1]

Ok, this causes this 'mystery':

/*--------------
  Active Focus
---------------*/

.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ .box:before,
.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ label:before,
.ui.checkbox input[type="checkbox"]:checked:focus ~ .box:before,
.ui.checkbox input[type="checkbox"]:checked:focus ~ label:before {
  background: #f9fafb;
  border-color: rgba(34, 36, 38, 0.35);
}

We sd remove gray background being applicable on focus.
Maybe use diff opacity for showing focus.

[jlukic]

This occured because of css specificity changes when i removed input[type="checkbox"] from :checked rules.

Resolving by adding activeFocus variables and styles.. fix coming shortly

[jlukic]

Example from next with fixed checkbox focus
http://jsfiddle.net/65rgdhdo/

[avalanche1]

Nice!
But for active checkbox and slider there is no special styling when they have focus. So no way to determine if they are currently selected. (unlike toggle, which changes color slightly)

[jlukic]

They change color subtly.

[avalanche1]

🔬 ah, yes!