Remove focus-background rule from .cmb2-wrap inputs (WP 7.0 checkbox/radio fix, #1556)#1557
Conversation
jtsternberg
left a comment
There was a problem hiding this comment.
Review
Context: This PR addresses the issue reported at https://wordpress.org/support/topic/weird-checkbox-behaviour-on-wp-7/ — on WP 7.0, CMB2 checkboxes appear broken because clicking them doesn't visually show as toggled. The root cause is that .cmb2-wrap input:focus { background: #fffff8; } overrides the background WP 7.0 uses to render checked-state contrast on focused checkboxes and radios.
The fix is correct and complete. The selector narrowing in _main_wrap.scss targets the root cause precisely, preserves the yellow focus background for text-like inputs, and removes it only for checkbox/radio where it conflicts with WP 7.0 rendering. All 8 compiled/minified CSS variants are consistently regenerated.
One optional scope note: The original input:focus rule also applies the yellow background to input[type=submit], input[type=button], input[type=reset], input[type=range], input[type=color], and input[type=file]. None of these have a WP 7.0 regression, so they're not blocking, but applying a yellow focus background to a submit button or color picker is arguably wrong. A follow-up to restrict the rule to only text-like input types would be reasonable — but that's out of scope for this fix and can be addressed separately.
Minor CSS note: The SCSS source uses quoted attribute values ([type="checkbox"]) while the compiled output strips the quotes ([type=checkbox]). Both are valid per spec for known HTML attributes in CSS — no action needed.
Fix is good to merge once out of draft.
Generated by Claude Code
WP 7.0 renders the checkbox/radio checked state as the input's own
background fill (background: var(--wp-admin-theme-color)). CMB2's
`.cmb2-wrap input:focus { background: #fffff8 }` rule — equal specificity
(0,2,1), loaded later — painted over that fill while focused, hiding the
white checkmark/dot until blur, so a click appeared to do nothing.
Remove the focus-background rule entirely rather than excluding
checkbox/radio via :not(), which keeps `.cmb2-wrap input:focus` specificity
unchanged for downstream overrides. Text inputs/textareas lose the
near-invisible #fffff8 focus tint; WordPress core's focus ring remains.
Verified on WP 7.0 (fixed) and 6.3.1 (no regression), on both the options
page and the post-edit metabox.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fef51d7 to
9e7093d
Compare
|
QA'd locally against WP 7.0 and WP 6.3.1, on both the options page and the post-edit (block-editor) metabox:
Verified via CSSOM (no |
Fix WP 7.0 checkbox/radio focus visibility (#1556) by removing the focus-background rule
WordPress 7.0 changed checkbox/radio rendering so the checked state is the input's own
background: var(--wp-admin-theme-color)fill (with a white::beforeindicator on top). CMB2's.cmb2-wrap input:focus { background: #fffff8 }has equal specificity (0,2,1) and loads later, so a focused-and-checked control was painted near-white and its indicator vanished until blur — making it look like the click did nothing.This PR removes the focus-background rule entirely, superseding the earlier
:not([type=checkbox]):not([type=radio])approach. Removal was chosen over the:not()exclusion because the exclusion raised.cmb2-wrap input:focusspecificity from (0,2,1) to (0,4,1), which would break downstream overrides. Removal keeps specificity untouched.Trade-off: text inputs/textareas lose the
#fffff8focus tint — visually negligible, and WordPress's own focus ring remains.Regenerated all affected distributed CSS variants from source.