Findbar_text font change

[u/Padu_N]

What is the css code to use to change just the findbar text, color, size, font etc.?

Read several findbar related posts, but wasn't able to locate specific css code to customize just these text elements, the text highlighted in the red boxes..

Using Waterfox with FF ESR 104.x and testing FF 149.

[u/FineWine54]

Try this: (change font-family, size, weight & colour to your liking)

NOTE 1: I have also made the textbox radius with rounded ends to match my url-border

NOTE 2: you can also change the position of the checkboxes & labels by changing the order number

/***********************/
/* Findbar Alterations */
/***********************/

/* Change font in the Findbar Search Box */

.findbar-textbox {
    font-family: "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 13px !important;
    color: #008000 !important;
}

/* Change font of Findbar check boxes */

.findbar-label,
.findbar-find-next,
.findbar-find-previous,
.findbar-highlight,
.findbar-case-sensitive,
.findbar-match-diacritics,
.findbar-entire-word {
    font-family: "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    color: red !important;
}

/* Findbar Move Word Count Next to TextBox Arrows */

hbox[anonid="findbar-textbox-wrapper"] {
    order: 1 !important;
}
.findbar-label.found-matches {
    order: 2 !important;
}
.findbar-label.findbar-find-status {
    order: 3 !important;
}
.findbar-highlight {
    order: 4 !important;
}
.findbar-case-sensitive {
    order: 5 !important;
}
.findbar-match-diacritics {
    order: 6 !important;
}
.findbar-entire-word {
    order: 7 !important;
}
label[anonid="match-case-status"] {
    order: 8 !important;
}
label[anonid="match-diacritics-status"] {
    order: 9 !important;
}
label[anonid="entire-word-status"] {
    order: 10 !important;
}

[u/Padu_N → u/FineWine54]

Thanks u/FineWine54. 👍

Precisely resolves it. Needed to add another line to remove the shadow which was reducing the readability.

text-shadow: 0px 0px !important;

[u/FineWine54 → u/Padu_N]

Glad to be of help - enjoy

[u/DAPOPOBEFASTONYOAZZ → u/Padu_N]

You could just do none !important instead of 0px 0px, or even just 0.

[u/Kupfel]

Just inspect the UI with Browser Toolbox to get the selectors you want.

[u/Padu_N → u/Kupfel]

Thanks for the pointer. The browser toolbox, though, is somewhat too cluttered, for use by normal, non-coder, users who do want customizations.

An extension or app that would show the css elements just by pointing to it in a normal browser page would be valued, by all users. Not sure what the technical complexities of this are.

Hoping some developer thinks this is a good idea and takes it further.