Есть HTML-файл. Там есть форма и текст.
<link rel="stylesheet" href="3.css">
<input type="text">
<div class="div_sel">Lorem ipsum dolor sit ameti.</div>
Есть CSS-файл. Он:
- заставляет форму менять цвет в фокусе
- заставляет текст менять цвет при выделении.
input:focus{background-color: aqua}
.div_sel::selection{color: green;}
Есть проблема:
Пока CSS-код во внешнем файле - CSS-код работает только на форме.
Текст будет менять цвет только в случае удаления формы () из HTML-файла.
Но, если сунуть CSS-код в сам HTML-файла, то всё работает, и форма, и текст:
<style>
input:focus{background-color: aqua}
.div_sel::selection{color: green;}
</style>
<input type="text">
<div class="div_sel">Lorem ipsum dolor sit ameti.</div>
Вопрос: в чём дело?
PS вдогонку:
Не работает в Опера 45.0 и в Хром 58.0.
Всё работает в IE 11 и в Edge 38.
Валидатор jigsaw.w3.org ругается на ::selection.
Webref.ru говорит, что "...Псевдоэлемент ::selection удалён из спецификации CSS3".