HTML Select Tag с черным фоном - треугольник раскрывающегося списка невидим в Firefox 3

StackOverflow https://stackoverflow.com/questions/29244

Вопрос

У меня есть следующий HTML (обратите внимание, что CSS делает фон черным, а текст белым):

<html>
  <select id="opts" style="background-color: black; color: white;">
    <option>first</option>
    <option>second</option>
  </select> 
</html>

Safari достаточно умен, чтобы сделать маленький треугольник, который появляется справа от текста, того же цвета, что и текст переднего плана.

Другие браузеры в основном игнорируют CSS, поэтому с ними тоже все в порядке.

Однако Firefox 3 применяет цвет фона, но оставляет треугольник черным, поэтому вы его не видите, как здесь

Example

Не могу понять, как это исправить. Может кто-нибудь помочь?Есть ли -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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top