Тег HTML Select с черным фоном - раскрывающийся треугольник невидим в Firefox 3
У меня есть следующий HTML-код (обратите внимание, что CSS делает фон черным, а текст белым)
<html>
<select id = "opts" style = "background-color: black; color: white;">
<option>first</option>
<option>second</option>
</select>
</html>
Safari достаточно умен, чтобы сделать маленький треугольник, который появляется справа от текста, того же цвета, что и текст переднего плана.
Другие браузеры в основном игнорируют CSS, так что с ними тоже все в порядке.
Firefox 3, однако, применяет цвет фона, но оставляет треугольник черным, поэтому вы его не видите, например
Не могу понять, как это исправить - может ли кто-нибудь помочь? Есть там -moz-select-triangle-color или что-то в этом роде непонятное?
Ответы 6
Кнопка должна быть черной? вместо этого вы можете применить черный фон к параметрам.
I dropped that code into a file and pushed it to ff3 and I don't see what you see...the arrow is default color with gray background and black arrow.
Are you styling scrollbars too?
Я обновил сообщение, HTML в нем теперь буквально все html, который загружается, никаких других CSS / JS или чего-то еще, и он по-прежнему выглядит точно так, как показано на картинке.
Заметьте, я нахожусь в перспективе. Он может делать разные вещи на XP, я не проверял
Должно быть проблема Vista. У меня XP SP 2 и выглядит нормально.
Это также проблема в Mac OSX Firefox 3.
Must be a Vista problem. I have XP SP 2 and it looks normal.
Так оно и есть. Я пробовал это на XP, и это нормально, и на Vista с темой, установленной на классическую Windows, тоже хорошо. Должно быть просто ошибка в теме firefox-vista-aero.
Чтобы маленькая черная стрелка показывалась на перспективах (с черным фоном), я сделал белый прямоугольник в формате gif и использовал следующий CSS:
select {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
Проблема с указанным выше исправлением заключается в том, что оно не работает в Safari - вы видите белый фон, который выглядит плохо. Я обошел это, используя этот псевдокласс, специфичный для Moz:
select:-moz-system-metric(windows-default-theme) {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
Теоретически этот CSS применяется только в том случае, если задействована причудливая тема Windows, см. Этот https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)
Я сбросил этот код в файл и переместил его на ff3, и я не вижу того, что вы видите ... стрелка имеет цвет по умолчанию с серым фоном и черной стрелкой. Вы тоже стилизуете полосы прокрутки?