Как стилизовать элемент опции select tag?

Я пытаюсь установить стиль option в раскрывающемся меню select в Google Chrome. Он работает во всех браузерах, кроме IE9 и Chrome.

 option.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white; } 
  Red White Blue Green  

Без использования JavaScript существует ли способ установить стиль для параметров в Google Chrome? После выбора цвет фона не отображается.

К сожалению, браузеры WebKit еще не поддерживают стиль тегов , за исключением color и background-color .

Наиболее широко используемым кросс-браузерным решением является использование

    /

  • и стиль их использования CSS. Такие структуры, как Bootstrap, делают это хорошо.

    Это выбор (от разработчиков браузера или W3C, я не могу найти никаких спецификаций W3C о вариантах выбора стиля), не позволяя выбирать варианты выбора стиля.

    Я подозреваю, что это будет поддерживать соответствие с собственными списками выбора.
    (например, о мобильных устройствах).

    Мне приходят 3 решения:

    • Используйте Select2, который на самом деле преобразует ваши избранные в ul s (позволяет многое)
    • Разделите select s на несколько, чтобы группировать значения
    • Разделить на optgroup

    Недавно я обнаружил что-то, что, похоже, работает для стилизации отдельных элементов в Chrome, Firefox и IE с использованием чистого CSS.

    Возможно, попробуйте следующее:

    HTML:

      

    CSS:

     select { background-color:#000; color: #FFF; } select * { background-color:#000; color:#FFF; } select *.red { /* This, miraculously, styles the '' elements. */ background-color:#F00; color:#FFF; } select *.white { background-color:#FFF; color:#000; } select *.blue { background-color:#06F; color:#FFF; } 

    Странно, что бросает осторожность в ветер. Кажется, он не поддерживает :active :hover :focus :link :visited :after :before , хотя.

    Пример JSFiddle: http://jsfiddle.net/Xd7TJ/2/

    Будущие версии Chrome (49+) теперь будут поддерживать элементы стиля со значением font-weight . Источник: https://code.google.com/p/chromium/issues/detail?id=44917#c22

    Новый стиль SELECT Popup: font-weight должен применяться.

    Этот CL удаляет темуChromiumSkia.css. |!important| в нем помешали применить font-weight . Теперь html.css имеет |font-weight:normal| , и |!important| должны быть ненужными.

    Была таблица стилей Chrome, themeChromiumSkia.css, которая использовала font-weight: normal !important; Important font-weight: normal !important; в нем все это время. Он должен находиться в стабильном канале Chrome по версии 49.0.

    У меня есть обходной путь с использованием jquery … хотя мы не можем создать конкретный параметр, мы можем стилизовать сам выбор – и использовать javascript для изменения classа выбора в зависимости от выбранного. Он работает достаточно для простых случаев.

     $('select.potentially_red').on('change', function() { if ($(this).val()=='red') { $(this).addClass('option_red'); } else { $(this).removeClass('option_red'); } }); $('select.potentially_red').each( function() { if ($(this).val()=='red') { $(this).addClass('option_red'); } else { $(this).removeClass('option_red'); } }); 
     .option_red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white; } 
         
  • Заполните раскрывающийся список при выборе другого выпадающего списка
  • Как resize шрифта для опции выбора?
  • Interesting Posts

    Действительный профиль подготовки для этого исполняемого файла не найден для режима отладки

    Почему C ++ не позволяет базовым classам реализовывать унаследованный интерфейс производного classа?

    Быстрые алгоритмы поиска парного евклидова расстояния (matrix расстояний)

    Как переместить раздел в GNU / Linux?

    Обновление пользовательского интерфейса из разных streamов в JavaFX

    USB-накопитель на 16 ГБ отображает 16 МБ и неприменим

    Журнал ping и дата не работают

    Легкий способ разобрать URL-адрес на кросс-платформе C ++?

    Сильно типизированная динамическая сортировка Linq

    Как запретить пользователям удалять папку, сохраняя при этом права на изменение ее содержимого?

    Создание кнопки в панели инструментов Android

    Загрузите файл с помощью JSF?

    Почему геттер называется так много раз с помощью атрибута rendered?

    Android HttpsUrlConnection eofexception

    Каковы наиболее распространенные символы без символов BMP Unicode в реальном использовании?

    Давайте будем гением компьютера.