HTML Выберите тег с черным фоном - выпадающий треугольник невидим в Firefox 3 - PullRequest
Новая
       33

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

6 голосов
/ 27 августа 2008

У меня есть следующий 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 или что-то такое неясное?

Ответы [ 6 ]

3 голосов
/ 16 марта 2009

Проблема с исправлением, описанным выше, заключается в том, что он не работает в 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)

3 голосов
/ 27 августа 2008

Должно быть Vista проблема. У меня XP SP 2, и это выглядит нормально.

2 голосов
/ 13 декабря 2008

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

select {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}
2 голосов
/ 27 августа 2008

Должна ли кнопка быть черной? вместо этого вы можете применить черный фон к опциям.

0 голосов
/ 28 августа 2008

Должно быть проблема с Vista. У меня XP SP 2 и выглядит нормально.

Так оно и есть.
Я попробовал это на XP, и это хорошо, и на Vista с темой, установленной на Windows Classic, это также хорошо. Должна быть просто ошибка в теме firefox-vista-aero.

0 голосов
/ 27 августа 2008

Я поместил этот код в файл и поместил его в ff3, и я не вижу, что вы видите ... Стрелка - это цвет по умолчанию с серым фоном и черной стрелкой.

Вы тоже стилизуете полосы прокрутки?

Я обновил пост, HTML-код в нем теперь буквально all загружаемый html, никаких других CSS / JS или чего-либо еще, и он по-прежнему выглядит точно так, как показано на рисунке

Обратите внимание, я нахожусь на перспективу. Это может делать разные вещи на XP, я не проверял

...