We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

ძიება მხარდაჭერაში

ნუ გაებმებით თაღლითების მახეში მხარდაჭერის საიტზე. აქ არასდროს მოგთხოვენ სატელეფონო ნომერზე დარეკვას, შეტყობინების გამოგზავნას ან პირადი მონაცემების გაზიარებას. გთხოვთ, გვაცნობოთ რამე საეჭვოს შემჩნევისას „დარღვევაზე მოხსენების“ მეშვეობით.

ვრცლად

ეს თემა დაარქივებულია. დასვით ახალი კითხვა, თუ დახმარება გესაჭიროებათ.

Style selected item from url autocomplete dropdownuserChrome.css

  • 2 პასუხი
  • 4 მომხმარებელი წააწყდა მსგავს სიძნელეს
  • 28 ნახვა
  • ბოლოს გამოეხმაურა ecly

ecly
ecly
more options

I'm running a failry customized userChrome.css with Firefox but can't seem to figure out how to eg. change the background color of the selected item from the autocomplete dropdown presented when typing in the URL bar.

I've used DOM inspector and see that they are are all of type '.autocomplete-richlistitem'. I've tried modifying them with 'active', 'focus' etc. but have no luck. I have it working such that my style is applied when I hover them, but when I use the arrow keys to select one of them I can't seem to get any style to apply, and I haven't been able to figure out what attribute defines the selected item using the DOM Inspector.

Anyone know the CSS required to style these?

I'm running a failry customized userChrome.css with Firefox but can't seem to figure out how to eg. change the background color of the selected item from the autocomplete dropdown presented when typing in the URL bar. I've used DOM inspector and see that they are are all of type '.autocomplete-richlistitem'. I've tried modifying them with 'active', 'focus' etc. but have no luck. I have it working such that my style is applied when I hover them, but when I use the arrow keys to select one of them I can't seem to get any style to apply, and I haven't been able to figure out what attribute defines the selected item using the DOM Inspector. Anyone know the CSS required to style these?

გადაწყვეტა შერჩეულია

The DOM Inspector shows these two attributes for an .autocomplete-richlistitem when I use the cursor down key:

  • selected = true
  • current = true

chrome://browser/skin/browser.css 

.autocomplete-richlistitem {
  height: 30px;
  min-height: 30px;
  font: message-box;
  border-radius: 2px;
  border: 1px solid transparent;
}

.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
  background-color: hsla(0, 0%, 0%, 0.06);
  border-color: hsla(0, 0%, 0%, 0.1);
}

.autocomplete-richlistitem[selected],
treechildren.searchbar-treebody::-moz-tree-row(selected) {
  background-color: Highlight;
}
პასუხის ნახვა სრულად 👍 0

ყველა პასუხი (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

შერჩეული გადაწყვეტა

The DOM Inspector shows these two attributes for an .autocomplete-richlistitem when I use the cursor down key:

  • selected = true
  • current = true

chrome://browser/skin/browser.css 

.autocomplete-richlistitem {
  height: 30px;
  min-height: 30px;
  font: message-box;
  border-radius: 2px;
  border: 1px solid transparent;
}

.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
  background-color: hsla(0, 0%, 0%, 0.06);
  border-color: hsla(0, 0%, 0%, 0.1);
}

.autocomplete-richlistitem[selected],
treechildren.searchbar-treebody::-moz-tree-row(selected) {
  background-color: Highlight;
}
ecly
ecly კითხვის დამსმელი
more options

cor-el said

The DOM Inspector shows these two attributes for an .autocomplete-richlistitem when I use the cursor down key:
  • selected = true
  • current = true
chrome://browser/skin/browser.css 
.autocomplete-richlistitem {
  height: 30px;
  min-height: 30px;
  font: message-box;
  border-radius: 2px;
  border: 1px solid transparent;
}

.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
  background-color: hsla(0, 0%, 0%, 0.06);
  border-color: hsla(0, 0%, 0%, 0.1);
}

.autocomplete-richlistitem[selected],
treechildren.searchbar-treebody::-moz-tree-row(selected) {
  background-color: Highlight;
}

That did the trick! Couldn't seem to derive that same information myself! Thanks a lot!