::after content doesn\’t seem to work as expected. What am I doing wrong?

[vsajip]

On Firefox, the labels of checkboxes and radio buttons are very close to the actual boxes themselves, when marked up like this:

<div class="checkbox">
  <label>
    Option 1
  </label>
</div>

To illustrate, below is an image showing Firefox on the left vs. Chrome on the right.

I can overcome this by placing a   immediately after the input tag, which I’ve done for the third option in the following:

However, I’d like to achieve the same effect using the CSS ::after feature. I tried the following CSS:

.firefox .checkbox input[type=checkbox]::after, .firefox .radio input[type=radio]::after {
  content: " ";
  white-space: pre;
}

and arranged some JavaScript to set the firefox on the body tag when running with Firefox. However, it doesn’t have the desired effect: can anyone tell me what I might be doing wrong? Here’s a pen which demonstrates:

https://codepen.io/vsajip/pen/ppXQeg

[Beverleyh]

Are you using normalise or reset CSS to standardise these differences across browsers? Maybe you should look in to that first so that you don’t have to rely on JavaScript to identify different browsers.

[Paulie_D]

Inputs can’t have pseudo-elements and if it this does work in a browser it’s not normative behaviour

https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field

[Author]

Posts