If you find the new Find in Page bar (cmd+F (Mac) or CTRL+F (other) ) a bit… ugly… with it’s right aligned buttons, here’s a fix that puts them together, makes the search box a bit wider, and adds some highlights when the buttons are “enabled”.

Create or change directory to (for Mac):

~/Library/Application Support/Firefox/Profiles/<Your Profile Name>/chrome

and create or edit userChrome.css

put this in userChrome.css:

/* adjust the width of the text field */
.findbar-textbox { width:30em !important; }

/* add a background color to the checked Highlight and Case sensitive buttons */
.findbar-highlight[checked]>label { background-color:#ff8 !important; }
.findbar-case-sensitive[checked]>label { background-color:#f88 !important; }

/* more possible tweaks */
/* Quick find - show buttons */
.findbar-container>*,.findbar-container>hbox>* { display:-moz-box; }

/* move spacer to a position before the close button */
/*
.findbar-container>spacer { -moz-box-ordinal-group:2 !important; }
.findbar-container>.findbar-closebutton { -moz-box-ordinal-group:3 !important; }
*/

@-moz-document url("chrome://browser/content/browser.xul") {
.findbar-container spacer { visibility: collapse }
.findbar-container .findbar-closebutton { -moz-box-ordinal-group: 0 }
}

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* add text to Previous and Next buttons */
.findbar-find-previous label:after { content: "\00a0 Prev"; }
.findbar-find-next label:after { content: "\00a0 Next"; }

.findbar-container>spacer {display:none!important}