[wp-trac] [WordPress Trac] #64910: Side meta box checkbox :checked state visually invisible in WordPress 7.0 Beta 5

[WordPress Trac]

#64910: Side meta box checkbox :checked state visually invisible in WordPress 7.0
Beta 5
--------------------------+--------------------------------------
 Reporter:  fernandot     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  trunk
 Severity:  normal        |   Keywords:  has-patch css meta-boxes
  Focuses:                |
--------------------------+--------------------------------------
 In WordPress 7.0 Beta 5, checkboxes inside side meta boxes are visually
 indistinguishable between checked and unchecked states. The checkbox
 '''does''' toggle correctly (`.checked` returns `true`), but the visual
 feedback is completely lost.

 This affects native HTML checkboxes inside classic PHP meta boxes
 registered
 via `add_meta_box()` with `'side'` context. It does not affect Gutenberg's
 own React-based sidebar controls (Categories, Tags, etc.) as those render
 outside the `.edit-post-meta-boxes-area` container.

 == Root cause ==

 A CSS rule in `load-styles` overrides the `:checked` state for checkboxes
 inside side meta boxes:

 {{{
 .edit-post-meta-boxes-area .metabox-location-side .postbox
 input[type=checkbox]:checked {
     background: #fff;
     border-color: #757575;
 }
 }}}

 This rule has higher specificity than the default admin `:checked` styles
 (which use `var(--wp-admin-theme-color)` for background and border),
 making checked checkboxes look identical to unchecked ones — white
 background with gray border in both states.

 == Steps to reproduce ==

 1. Register a simple meta box with context `'side'` containing a native
 `<input type="checkbox">`:

 {{{
 add_meta_box(
     'my_test_metabox',
     'Test Checkbox',
     'my_test_metabox_callback',
     'post',
     'side',
     'default'
 );

 function my_test_metabox_callback( $post ) {
     echo '<label>';
     echo '<input type="checkbox" name="test_check" value="1">';
     echo ' Enable something';
     echo '</label>';
 }
 }}}

 2. Open the post editor (block editor).
 3. Click the checkbox inside the side meta box.
 4. Observe: no visual change. The checkbox appears unchecked.
 5. Run in browser console: `document.querySelector('#my_test_metabox
 input[type="checkbox"]').checked` — returns `true`.

 == Expected behavior ==

 The checkbox should display the standard WordPress admin checked state
 (colored background with white checkmark SVG).

 == Actual behavior ==

 The checkbox remains visually white/unchecked regardless of its actual
 state.

 == Environment ==

 * WordPress 7.0 Beta 5
 * Tested with Twenty Twenty-Five theme, all plugins deactivated except a
 minimal test plugin with the above code
 * Tested in Chrome and Firefox
 * No console errors

 == Suggested fix ==

 Remove or correct the `:checked` override in the side meta box styles so
 it does not reset `background` and `border-color` to values identical to
 the unchecked state. The rule should either be removed entirely or updated
 to preserve the default admin `:checked` styling:

 {{{
 .edit-post-meta-boxes-area .metabox-location-side .postbox
 input[type=checkbox]:checked {
     background: var(--wp-admin-theme-color, #2271b1);
     border-color: var(--wp-admin-theme-color, #2271b1);
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64910>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform