Как изменить цвет фона элемента <option>в Google Chrome? - PullRequest
Новая
       0

Как изменить цвет фона элемента <option>в Google Chrome?

3 голосов
/ 08 февраля 2012

У меня проблемы с настройкой цвета фона (и цвета текста) для параметров в списке <select> в Google Chrome.

Кажется, что отлично работает в Firefox:

Снимок экрана 2012-02-08 в 11.57.38 AM.png http://img638.imageshack.us/img638/980/screenshot20120208at115.png

Но не в Google Chrome:

Закрыто:

http://img684.imageshack.us/img684/3811/picturecj.png

Открыто:

Снимок экрана 2012-02-08 в 11.59.00 AM.png http://img163.imageshack.us/img163/980/screenshot20120208at115.png

Код: 

<html>
<head>
    <style>
        select
        {
            background:yellow!important;
        }
        option
        {
            background:red!important;
        }
        .c1
        {
            background-color:green!important;
            color:red!important;
        }
    </style>
</head>
<body>

<select>
    <option class="c1">nice long option name</option>
    <option class="c2">nice long option name</option>
    <option class="c3">nice long option name</option>
    <option class="c4">nice long option name</option>
    <option class="c5">nice long option name</option>
</select>

</body>
</html>

Интересно, использует ли Google Chrome свои собственные элементы или, возможно, элементы операционной системы хоста для визуализации поля выбора, и, возможно, именно поэтому он не работает? Возможно, это хорошо, потому что эти цвета выглядят довольно ужасно, но было бы неплохо, если бы Chrome предложил немного больше контроля.

Ответы [ 5 ]

1 голос
/ 01 марта 2013

Да, -webkit-Внешний вид хорошо справляется с работой.

Но, не применяйте это правило к элементу выбора, назначьте его параметру / optgroup: 

option, optgroup { -webkit-appearance: none; }

Это решает "белый текст на whitebackground "в Chrome на Ubuntu.

Надеюсь, это кому-нибудь поможет.

1 голос
/ 08 февраля 2012

В общем, попытка стилизовать элементы - больше проблем, чем стоит. Кросс-браузерная поддержка ужасна. Как правило, вы в конечном итоге будете использовать решение JS. Если вы настроили таргетинг на один конкретный браузер, с вами все будет в порядке, но я бы просто позволил браузерам отображать и элементы так, как вам хочется.

Тем не менее, если вы ищете хорошее решение JS для этого, я использовал Chosen и обнаружил, что оно отлично работает. Он заменит желаемый элемент элементами div и li, которые вы можете придать стилю по своему вкусу.

1 голос
/ 08 февраля 2012

Попробуйте: выберите {-webkit-появление: нет;}

Возможно, это должно вам помочь.

Если нет ... то, вероятно, Chrome не поддерживает его.

0 голосов
/ 29 августа 2013

Это постоянная проблема с сайтами, использующими темную тему. Я обнаружил, что применение этого правила в основном файле CSS решает проблему для меня:

select {-webkit -appearance: none}

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 08 февраля 2012

Я сталкивался с этой проблемой и раньше, CWD.Поскольку браузеры имеют значение по умолчанию для форм и элементов форм, иногда вам необходимо переопределить настройку браузеров с помощью JavaScript / jQuery.

Проверьте эту ссылку: это может помочь при стилизации.

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...