Есть ли способ применить стиль CSS для параметров HTML5 datalist?

Я хотел бы изменить способ отображения списка различных параметров моего каталога данных. Можно ли применить к нему некоторые свойства CSS?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

Я пробовал

option {
    background: red;
}

но он не работает.

Ответы

Ответ 1

Подобно элементам выбора, элемент datalist имеет очень мало гибкости в стилизации. Вы не можете создать какой-либо из предложенных терминов, если это то, о чем спрашивал ваш вопрос.

Браузеры определяют свои собственные стили для этих элементов.

Ответ 2

Существует подход, который работает. Я использую Firefox с Ubuntu, поэтому я не могу проверить, что он будет работать с другими браузерами и операционными системами. Первое изображение ниже - это производственная версия. Второе изображение, приведенное ниже, является преувеличением для иллюстрации.

      

Базовое изображение

#answer {
    /*datalist has "id=answer"*/
    border: .25em solid #137da0;
    font-weight: bold;
    color: black;
    padding: 1px 1px;
    cursor: pointer}

Чрезмерно измененное изображение для иллюстрации

#answer {
    /*datalist has "id=answer"*/
    border: .5em solid #137da0;
    font-size: 2em;
    font-weight: bolder;
    font-size: 2em;
    color: red;
    padding: 1px 1px;
    cursor: pointer}

Примечание: id='answer' в строке с "input" Используйте #answer в вашем файле CSS, как показано ниже. (По какой-то причине #answer отображается серым цветом ниже.)

Кроме того, чтобы Firefox использовал свойство datalist в ожидаемом режиме, я отсылаю вас к следующему сообщению: Показывать ярлыки каталоги данных, но представить фактическое значение

Ответ 3

попробовать:

input[list]
{
  background: red;
}