Firefox Does Not Display Checkboxes and Radio Buttons

The issue is that on some systems Firefox displays the checkbox and radio button controls without an outline.

These controls can still be selected and functional, but they are difficult to see and sometimes this can cause problems with completing forms.

I have run into this issue a number of times, especially on Linux-based systems, and this occurs when the Firefox Profile is using the default system provided styling.

The following steps fixes this issue on Linux by providing a custom styling.

1. Navigate to the Firefox profile folder location.

2. Create a folder called chrome if it does not exist.

3. Create a file called userContent.css in the chrome folder.

4. Open the userContent.css in a text editor and copy the following content.
Modify according to your preference.

// path: /home/$USER/.mozilla/firefox/<RANDOM>.default/chrome/userContent.css
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white !important;
background-color: white !important;
color: ThreeDFace !important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

5. Save and close the file.

6. Launch Firefox and verify the fix.