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.

NOTE: The default profile is located in ~/.mozilla/firefox/xyz5abcd.default-1234123412345 , where xyz5abcd.default-1234123412345 is generated by Firefox.

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.

NOTE: The following applies to Firefox 54 and later.
If the radio buttons and checkboxes exhibit collapsing behavior then comment out or remove the -moz-appearance: none !important; line located in the input[type="radio"]... section.
Thanks to ftobin for finding this.

Posted

in

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.