Firefox Search Bar Show Engine Names – userChrome.css Style Builder

You can use this page to select your options and generate CSS you can copy/paste into a userChrome.css file (based on the user style Firefox Search Bar Show Engine Names). For more information on using this custom style rule in a userChrome.css file:

IMPORTANT: This style changes the appearance of the bar, but not how it functions.

May 6, 2018: Currently, userstyles.org no longer allows seamless background retrieval of styles saved there, so until this page is rebuilt, you will need to add a step to get the generated code (see buttons/links below the options).

Vertical spacing and columns:

Hide the "Search for..." line above the non-default search engines?

Hide the "Add ..." line for a site's own search engine (and the green + on the icon)?

Hide the "Change Search Settings" line at the bottom?

Show "Search using ..." tooltip text in or above the search box?

Drop-down Color Scheme (Adapt to Light/Dark browser themes)

Theming for search engines on hover/selection:

Custom text color (hex code):


Custom background color:


Custom boldness:

CSS based on above options:

CSS to be shown here

Copyright © 2018 Jefferson Scher (BSD-3-Clause License or CC-BY License). FileSaver.js © 2016 Eli Grey (MIT License).

Current code for search engine plugin icons (to update the above after editing, change any style option value):