This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Change Star Icon for Bookmark links in URL dropdown when I enter keyword

more options

Is there a way I can change the star icon which appears for Bookmark links in url drop down when I type the keywords?

For e.g. if I have bookmark page as testing1, When I type in test in address bar we get URL dropdown which shows testing1 bookmark with little star to the left of the bookmark. Is there a way I change it using userchrome.css?

I am asking this question, because I changed the background of URL dropdown to black and star icon for bookmarks in URL dropdown is overwritten by that code. So I want to get past that issue.

Is there a way I can change the star icon which appears for Bookmark links in url drop down when I type the keywords? For e.g. if I have bookmark page as testing1, When I type in test in address bar we get URL dropdown which shows testing1 bookmark with little star to the left of the bookmark. Is there a way I change it using userchrome.css? I am asking this question, because I changed the background of URL dropdown to black and star icon for bookmarks in URL dropdown is overwritten by that code. So I want to get past that issue.

Chosen solution

You could try something like this:

  .autocomplete-richlistitem:not([selected=true]) {
    color: #aaa !important;
  }

The reasoning behind that is that the bookmark star and the generic globe icon use the inherited text color to fill the icon. So by setting the text color of the row, you are automatically coloring the icons to match. If you are using a different text color, replace #aaa with your color.

Perhaps as part of a set:

  #PopupAutoCompleteRichResult .autocomplete-richlistbox {
    background-color: #111 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([selected=true]) {
    color: #aaa !important;
    background-color: #111 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[selected=true] {
    color: #eee !important;
    background-color: #555 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[selected=true] .ac-url, 
  #PopupAutoCompleteRichResult .ac-url[selected] {
    color: #69f !important;
  }

Or if you have everything else sorted and you just want to target the stars:

  .ac-type-icon[type="bookmark"] {
    fill: #aaa !important;
  }
Read this answer in context 👍 1

All Replies (5)

more options

Chosen Solution

You could try something like this:

  .autocomplete-richlistitem:not([selected=true]) {
    color: #aaa !important;
  }

The reasoning behind that is that the bookmark star and the generic globe icon use the inherited text color to fill the icon. So by setting the text color of the row, you are automatically coloring the icons to match. If you are using a different text color, replace #aaa with your color.

Perhaps as part of a set:

  #PopupAutoCompleteRichResult .autocomplete-richlistbox {
    background-color: #111 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([selected=true]) {
    color: #aaa !important;
    background-color: #111 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[selected=true] {
    color: #eee !important;
    background-color: #555 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[selected=true] .ac-url, 
  #PopupAutoCompleteRichResult .ac-url[selected] {
    color: #69f !important;
  }

Or if you have everything else sorted and you just want to target the stars:

  .ac-type-icon[type="bookmark"] {
    fill: #aaa !important;
  }
more options

Thanks for the response.

I tried this in userchrome.css and it does not work.


.ac-type-icon[type="bookmark"] {

   fill: white;

}

more options

Hi can Right Click it and Remove the Star if that works better.

more options

I dont want to remove the star.

I want to change color of it.

more options

Never mind. Below code in userchrome.css worked.

.ac-type-icon[type="bookmark"] {

   fill: #FFFFFF !important;

}


I did not restart the FF after the change.

Thanks a lot guys.