[wp-trac] [WordPress Trac] #55768: Checkboxes not displayed when images are turned off in browser

[WordPress Trac]

#55768: Checkboxes not displayed when images are turned off in browser
----------------------------+-----------------------------
 Reporter:  martiniwebb     |       Owner:  (none)
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  Future Release
Component:  Administration  |     Version:  5.3
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  ui, css
----------------------------+-----------------------------

Comment (by vyasnaman):

 I've used the following patch to create an fallback overlay checkmark icon
 using CSS only. If images are turned off, this simple icon will be
 displayed. Otherwise, user will see the original svg icon.

 {{{
 diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
 index ffe2c1711e..7a62b75bf1 100644
 --- a/src/wp-admin/css/forms.css
 +++ b/src/wp-admin/css/forms.css
 @@ -181,6 +181,19 @@ input[type="checkbox"]:checked::before {
         width: 1.3125rem;
  }

 +input[type="checkbox"]:checked::after {
 +       content: '';
 +       position: absolute;
 +       top: 0.125rem;
 +       left: 0.125rem;
 +       width: 0.5rem;
 +       height: 0.25rem;
 +       border-left: 2px solid #3582c4;
 +       border-bottom: 2px solid #3582c4;
 +       transform: rotate(-45deg);
 +       display: inline-block;
 +  }
 +
  input[type="radio"]:checked::before {
         content: "";
         border-radius: 50%;
 @@ -1573,6 +1586,13 @@ table.form-table td .updated p {
                 margin: -0.1875rem -0.3125rem;
         }

 +       input[type="checkbox"]:checked::after {
 +               width: 0.7rem;
 +               height: 0.35rem;
 +               top: 0.375rem;
 +               left: 0.25rem;
 +       }
 +
         input[type="radio"],
         input[type="checkbox"] {
                 height: 1.5625rem;

 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55768#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform