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.
~/.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.
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.
Leave a Reply