Avatar for Username

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

이 쓰레드는 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

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!