Change Star Icon for Bookmark links in URL dropdown when I enter keyword
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)
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;
}
Thanks for the response.
I tried this in userchrome.css and it does not work.
.ac-type-icon[type="bookmark"] {
fill: white;
}
Hi can Right Click it and Remove the Star if that works better.
I dont want to remove the star.
I want to change color of it.
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.