Search autocomplete popup border

User Help for Mozilla Firefox
Post Reply
memeplex
Posts: 1
Joined: March 26th, 2015, 3:21 pm

Search autocomplete popup border

Post by memeplex »

Hi all,

how can I change the bottom border of the search autocomplete popup in firefox to make it black, solid and 1-pixel width?

By default there is no bottom border. See this screenshot http://postimg.org/image/jjnf66zwv/97dbdf31/.

Cheers
--
Carlos
User avatar
LoudNoise
New Member
Posts: 39900
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Re: Search autocomplete popup border

Post by LoudNoise »

Moved to Support since this isn't a theme issue.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Search autocomplete popup border

Post by mcdavis »

memeplex wrote:how can I change the bottom border of the search autocomplete popup in firefox to make it black, solid and 1-pixel width?


Here's the element structure of the popup (below, using a notation I'm sure you can figure out, based on CSS notation, # is id, . is class, etc.) You can see the outermost element is a panel with id #PopupSearchAutoComplete. So, in CSS, you could say something like:

Code: Select all

#PopupSearchAutoComplete { border-bottom: 1px solid black !important; } 


The exact CSS would depend on what other rules are applying to that element.

Note, the element structure is for Firefox 34; there's been at least one change since then but I don't believe it impacts what you're trying to do.

Code: Select all

    panel#PopupSearchAutoComplete[type="autocomplete"]
      hbox.search-panel-header.search-panel-current-engine[anonid="searchbar-engine"]
        // This hbox displays the current chosen (default) search engine.
        // This hbox and its contents are hidden if no text has been entered by the user.
        image.searchbar-engine-image
        label[anonid="searchbar-engine-name"]
      tree.autocomplete-tree.plain.search-panel-tree[anonid="tree"]
        // This tree displays suggested autocompletion values for the search text entered by the user.
        // This tree and its contents are hidden if no text has been entered.
        treecols[anonid="treecols"]
          treecol#treecolAutoCompleteValue.autocomplete-treecol
        treechildren.autocomplete-treebody [+]
      hbox[anonid="search-panel-one-offs-header"].search-panel-header.search-panel-current-input
        // This hbox displays the current text for which a one-off search would be executed.
        // This hbox and its contents are hidden if no text has been entered by the user.
        label[anonid="searchbar-oneoffheader-before"][value="Search for "]
        label[anonid="searchbar-oneoffheader-searchtext"].search-panel-input-value
        label[anonid="searchbar-oneoffheader-after"][value=" with:"]
      description[anonid="search-panel-one-offs"].search-panel-one-offs
        // This description contains the icons of individual search engines to pick for a one-off (one-time) search.
        // The description and its contents are hidden if all alternate engines are disabled.
        // In this example, we show the DOM for two rows of icons, five engines in the first row and two in the second.
        button.seachbar-engine-one-off-item[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-of-row[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-row[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-row[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-row.dummy[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-row.dummy[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
        button.seachbar-engine-one-off-item.last-row.last-of-row.dummy[label="somename"][image="someurl"][tooltiptext="somename"][width=calculatedButtonWidth] [+]
      vbox[anonid="add-engines"]
        // If the current tab contains a site offering a new installable search engine,
        // it's listed here.  This vbox and its contents are hidden if no installable
        // engines are available (or if already installed).
        // See also (Fx36) Bug 1106432 which changes the representation of .addengine-item to show a badge on it.
        button.addengine-item[label='Add "Bugzilla@Mozilla"'][image="someurl"][tooltiptext="someurl"][pack="start"][crop="end"][uri="someurl"][title="Bugzilla@Mozilla"] [+]
      button.search-setting-button.search-panel-header[anonid="search-settings"][label="Change Search Settings"] [+]
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
Post Reply