Могу ли я раскрасить фон выделенных элементов в 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. Заметьте, что поле не сразу изменило цвет на красный фон, но как только я выбрал другой вариант, я мог ясно видеть, что он действительно стал красным. Вы можете проверить это в js fiddle, указанном выше.

http://js fiddle.net/vzDvK/1/

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

Answer 4

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

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

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