3

In Firefox, I can search for text using either

  • CTRL+F [normal search]
  • / [quick search]
  • ' [quick search, links only]

I can style user-selected text / links using

  • a:focus
  • a:active
  • ::-moz-selection

However

  • the first two seem to apply only to user-selected/focused/activated links (by mouse, or TAB-navigating).
  • ::-moz-selection seems to be applied only to the text I manually selected, not the text that is selected due to incremental search. The incremental search match is highlighted by Firefox in the greenish color.
  • when I search only in links ('), the searched part is being highlighted by Firefox in the same greenish color; moreover, the whole link gets outline; when the quick find disappears (~5 secs), the whole link gets :focus style applied -- not before that.

See the screenshot:

Firefox search-selection highlight

Is there any CSS pseudoclass to allow styling of selection that resulted from the search, not the user hand-selection?

Improve this question
10
  • You mean like you see in the Google Search Terms technique? Commented Jul 21, 2012 at 12:13
  • No, I mean search within browser (CTRL-F), not from Google :) Browser-side. Have you taken a look at the screenshot? Commented Jul 21, 2012 at 12:17
  • I said like, yes I've seen the screenshot. What the Google Search Terms technique does is use GET values passed to the page and an in-page script to automate wrapping the terms in markup with a class that highlights the terms on the page. Is this what you are after? Commented Jul 21, 2012 at 12:19
  • 1
    Use onkeypress to capture and prevent ' and/or CTRL+F from being pressed and replace it with your own search tool technique. There's probably a library or plugin out there for doing that. Commented Jul 21, 2012 at 12:25
  • 1
    This mozillazine forum post at least suggests which styles cover the find highlight coloring, although this does not mean you can override it on another browser (as it's part of the chrome). Commented Jul 21, 2012 at 13:08

1 Answer 1

Reset to default
5

From this mozillazine forum post, you can go to about:config and add one of the following to style different ui.text* settings on the browser chrome:

ui.textSelectBackground
ui.textSelectBackgroundAttention
ui.textSelectBackgroundDisabled
ui.textSelectForeground
ui.textBackground
ui.textForeground
ui.textHighlightBackground
ui.textHighlightForeground
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Note that this is only for yourself, you cannot make this change global for the rest of your users on your site.
As @Truth suggests, about:config and the browser chrome are internal to the Firefox browser.
Sure. I only needed it for my own, so it's ok. I think there's no CSS property for this and probably there won't be any for a long time, or ever.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.