css Question posted in
Some basic documentation can be found here.

Css – Remove firefox form field highlight?

I’m having this problem with firefox form fields. They’re suddenly highlighting in bright, ugly blue, and I’m trying to get it back to the original, more clean dotted line. Actually, at this point, from all the css modifications I’ve been trying, I would settle for none at all or a change of color and size.

What I’m talking about:

What I’d like:

What code I have used in UserChrome.css:

button {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}

input:focus {outline:none;}

input[type=text]:focus {outline:none;}

input {border:0; outline:none;}

input {box-shadow:none;}

input:focus {
outline: none !important;
border: none important!
border-color: #ccc;
box-shadow: none important!
}

@-moz-document url-prefix("http://"), url-prefix("https://") {
    input[type="text"], input[type="password"] {
    outline: none !important;}

input[type="checkbox"], *:focus {
    accent-color: transparent !important;}

input:focus, select:focus, textarea:focus, button:focus, input {
    accent-color: transparent !important;
    outline: none !important;
}

I’ve also tried modifying the following in about:config:

browser.display.focus_ring_on_anything
browser.display.focus_ring_width
browser.display.always_show_rings_after_key_focus

Nothing works. I’m going to pull my hair out. The blue highlight is disturbing and gaudy, not to mention messes up the style of the pages. I want the element gone, it is not needed, or at the very least the color changed. How would I do this without simply not using firefox any longer?

Tags:

2

Answers


  1. 0

    You could try adding -moz-appearance:none; for all input fields. That should turn off the styling and enforce a standardized primitive appearance.

    Login or Signup to reply.
  2. 0

    userChrome.css cannot change what appears in the author (i.e., web page) area of a browser. userChrome.css is just for the chrome area of the browser (i.e., everything except the page area).

    Instead there is userContent.css to define a default browser style for web pages. It goes in the same directory as userChrome.css. Be aware that userContent.css also applies to some "system" areas, like devtools panels. (You’d think that devtools should be considered chrome, or at least I would, but apparently it’s considered content.)

    For everyone, to enable the use of userChrome.css and userContent.css:

    1. Go to about:config ("Advanced Preferences") in the URL bar
    2. Set toolkit.legacyUserProfileCustomizations.stylesheets to true
    3. Go to about:profiles in the URL bar
    4. Open the profile directory you want to customize (probably the roaming one of your default profile)
    5. Create a subdirectory named "chrome"
    6. Add whatever CSS files you want in that subdirectory (userChrome.css and/or userContent.css)
    7. Restart Firefox (you can do that from about:profiles)

    Every time you change those files, you’ll have to restart Firefox.¹

    For this question, to set the browser default for focus styling, enter the following style (or whatever one you like) in userContent.css:

    :focus-visible,
:focus {
  outline: 2px dotted #888;
}

    ¹The restart requirement is technically not always a requirement. You can edit the "live" version of those files in the Style Editor in devtools. Be aware that those files have to have had some content when Firefox started in order to be able to edit it "live." However, if you’re trying to tell your mom how to edit userChrome.css over the phone, consider just telling her to restart.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search