Могу ли я окрашивать фоны выделенных элементов в HTML-параметрах выбора только с помощью CSS?

Question

Я много искал и видел людей, предлагающих, что:

::-moz-selection {background: red;}
::selection {background: red; }

.. работает для окрашивания фона выбранных в данный момент элементов в элементе множественного выбора формы.(Примечание: я имею в виду выбранные элементы, а не элементы с фокусом).

Я не могу заставить это работать.Я делаю это неправильно?

#dropdowns select::selection {
    background: red;
}

Приветствия: /

Настройка: Использование Chrome для Mac

Answer 1

Вместо установки только цвета фона вы также можете установить линейный градиент в качестве фона:

option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

Это работает в IE11 и последних версиях Chrome и Firefox. Safari просто игнорирует это. Не тестировал IE / Edge.

Если вы хотите установить цвет фона только для сфокусированного множественного выбора, вы можете использовать этот фрагмент:

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

Смотрите полную демонстрацию здесь: http://codepen.io/marceltschopp/pen/PNyqKp

Answer 2

::selection не относится к выбранным параметрам;это относится к выделенному тексту.Либо вы неверно истолковываете их предложения, либо то, что они сказали, совершенно неверно.

Согласно этому ответу , вы должны иметь возможность использовать option:checked для стилизациивыбранные элементы:

#dropdowns option:checked {
    background: red;
}

Но я не смог заставить его работать для <select> или <select multiple> элементов в этой тестовой скрипке .

Answer 3

Я нашел это, потому что у меня была та же проблема, я нашел странное решение, которое, кажется, работает по крайней мере с Chrome и, возможно, с другими.Решение состояло в том, чтобы использовать селектор атрибута.Похоже, что это работает с хромом, я проверил это в JS Fiddle.Заметьте, что поле не сразу изменило цвет на красный фон, но как только я выбрал другой вариант, я ясно увидел, что он действительно стал красным.Вы можете проверить это в jsfiddle, указанном выше.

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] {
    background: red;
}

Answer 4

Правильный CSS-селектор для вас будет :checked

:: выбор только для выделенного текста:

• http://reference.sitepoint.com/css/pseudoelement-selection