:before && :after pseudo elements not showing Firefox

by

The expected behavior can be enabled for Firefox browsers by using the following on the input[type=checkbox]:

input[type=checkbox] {
  -moz-appearance:initial // Hack for Firefox Browsers
}

This option allows you to use :before pseudo-elements on the input-element, just like it works out of the box for Safari and Chrome and Opera Browsers:

input[type=checkbox]::before { 
    ...
}

The moz-appearance is currently experimental technology. More information along with an overview of Browser compatibility can be obtained here: MDN web docs – appearance.

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. How to remove the arrow from a select element in Firefox
  4. Setting transform-origin on SVG group not working in Firefox
  5. Remove outline from select box in FF
  6. Div 100% height works on Firefox but not in IE
  7. Flexbox column-reverse in Firefox, Edge and IE
  8. How do I make Firefox auto-refresh on file change?
  9. transition for background-image in firefox?
  10. Different implementation of Flexbox in Firefox and Chrome
  11. Style a checkbox in firefox — remove check and border
  12. Firefox 30 is not hiding select box arrows anymore
  13. “break-inside: avoid-column” doesn’t work in Firefox
  14. text-decoration not working for visited state link
  15. Is it possible to change the order of list items using CSS3?
  16. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  17. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  18. 2 colors in one placeholder of input field
  19. Flex elements ignore percent padding in Firefox
  20. How do I make a text input non-editable?
  21. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  22. How to center and crop an image to always appear in square shape with CSS?
  23. Why would Google use a font tag?
  24. Why use a sprite sheet rather than individual images?
  25. Styling the “ element in CSS?
  26. Table vertical header?
  27. inline-block element with no text renders differently
  28. Adding text before list
  29. Sizing flex items on the last row
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment