HTML Select Tag с черным фоном - треугольник раскрывающегося списка невидим в Firefox 3
-
09-06-2019 - |
Вопрос
У меня есть следующий 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
или что-то такое непонятное?
Решение
Должно быть Vista
проблема.У меня есть XP SP 2
и выглядит нормально.
Другие советы
Проблема с исправлением, приведенным выше, заключается в том, что оно не работает в 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)
Кнопка должна быть черной?Вместо этого вы можете применить к параметрам черный фон.
Чтобы маленькая черная стрелка отображалась на Vista (на черном фоне), я создал gif-изображение в белом поле и использовал следующий CSS:
select {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
Я поместил этот код в файл и отправил его в ff3, и я не вижу того, что видите вы... стрелка имеет цвет по умолчанию с серым фоном и черной стрелкой.
Вы тоже оформляете полосы прокрутки?
Я обновил сообщение, HTML теперь буквально все загружаемый HTML, никаких других CSS/JS или чего-то еще, и он по-прежнему выглядит точно так, как показано на рисунке.
Обратите внимание, что я на Vista.На XP он может делать разные вещи, я не проверял
Должно быть, проблема в Vista.У меня XP SP 2 и выглядит нормально.
Так что, это.
Я попробовал это на XP, и все в порядке, и на Vista с темой, установленной на классическую версию Windows, все также хорошо.Должно быть, это просто ошибка в теме Firefox-Vista-Aero.