Editor checkbox not behaving correctly (CSS)

resqonline · August 27

Current Version: DataTables 3.0.2 / Editor 3.0.1

There is a CSS issue with Editor checkbox which doesn't render correctly when clicking in it. The first click only highlights the field (focus), but doesn't show the checkmark. Only after you click somewhere else, the checked display is shown.

The CSS interfering with the checkbox rendering is:

  div.DTE_Field input, div.DTE_Field textarea {
      transition: background-color ease-in-out .15s;
  }
  div.DTE_Field input:focus, div.DTE_Field textarea:focus {
      background-color: #ffe;
  }

The problem is the 'broad' definition of input, which results in checkboxes or radio buttons to behave like regular inputs.

This is the fix I applied to my own CSS:

/* Editor checkbox/radio checked-state repaint fix */
div.DTE_Field input[type="checkbox"],
div.DTE_Field input[type="radio"] {
    transition: none;
}
div.DTE_Field input[type="checkbox"]:focus,
div.DTE_Field input[type="radio"]:focus {
    background-color: transparent;
}

resqonline · August 27

Ah, I noticed an 'overwrite' of styles because of WordPress CSS rules being applied. The issue is with '-webkit-appearance: none' because WP styles checkboxes differently (and apparently recent changes in WP are interfering with my datatables and editor styles and scripts).

So in case anyone has the same issue:

/* Restore native rendering, bypassing WP admin's custom checkmark styling */
div.DTE_Field input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}
div.DTE_Field input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

allan · August 27

Interesting - many thanks for letting me know that WordPress' admin styling is causing the issue here. Possibly I should add appearance: radio to the stylesheet for Editor to try and force the correct value.

Allan

Editor checkbox not behaving correctly (CSS)

Editor checkbox not behaving correctly (CSS)

Answers