-webkit-appearance not working properly with checkbox

External Issue #11947102

Details

Author
Jimmy T.
Created
May 9, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Try the following CodePen in a modern browser like Chrome, Firefox or Safari, and then in Edge. MS Edge won’t let us change the way a checked checkbox looks using the input[type=’checkbox’]:checked:before selector. In fact, the use of the selector even breaks the border styling with the first rule/selector that does work.
CodePen demonstrating the problem: https://codepen.io/anon/pen/VbyBEr

Obviously my intention was not to create an ugly checkbox, but the CodePen demonstrates the problem in Edge.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “External”

    • Technically this is currently by design.

       

      Input elements should not support before and after pseudo elements, but Webkit (Chrome and Safari) had a bug that allowed them. Nobody sane use those in the normal case, but it became a habit on mobile to hide the checkbox and use the before/after pseudo-elements to render it, which means the checkbox was totally invisible in Edge and Firefox.

       

      A workaround the team decided to put in place is to disable -webkit-appearance:none if the before/after of an input is styled. This makes sure everything at least renders in Edge even if not as styled by the author. Adding support for before/after on unstyled checkboxes is on the backlog, though.

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

    • Changed Status from “External”

    • Well, one could argument that -webkit-appearance:none on a form element should make it behave like a block element allowing for pseudo elements - in fact, that’s the only way you could reliably style the checked state of a checkbox without manipulating the DOM, if you want a symbol to indicate the checked state, and don’t want to rely on a non-scalable image set using background-image:url(…).
      In fact, with Firefox 54 (which is currently in beta), Mozilla decided to use that approach. So I was actually not entirely accurate when I initially stated that the Codepen works in Firefox - it requires version 54+.

      Francois: You stated: “Adding support for before/after on unstyled checkboxes is on the backlog, though.”
      You did mean to say that support for before/after is in the backlog for Styled checkboxes, right? You wrote UNstyled checkboxes.

      So basically, can you confirm that the Codepen is likely to be supported if the request is prioritized from the backlog ?

      • Thanks
    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To from “Steven K.” to “Francois R.”

      Changed Status to “External”

    • Thank you for the report. As Francois mentioned the behavior gap is known and tracked on our backlog. Resolving as duplicate of that work item that has all the technical details we need

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

    You need to sign in to your Microsoft account to add a comment.

    Sign in