Forums

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

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 have done for the third option in the following:

However, I would 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 class 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? According to the Firefox debug console, the rule is being applied.

Here’s a pen which demonstrates:

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