CSS - установить цвет фона:: selection в INPUT или TEXTAREA в webkit/chrome?

Я пытаюсь установить цвет выделения на нашем сайте [для браузеров, которые поддерживают это; unsupported получит системную ошибку; ищет CSS-only и не будет реализовывать JS для этого].

The:: selection работает отлично (оставляя здесь -moz для ясности) на регулярном тексте страницы. Однако я хочу, чтобы:: select также работал над выбранным текстом в элементах INPUT и TEXTAREA. В Firefox работает (http://cl.ly/image/201s09102K36), но не работает в webkit (хром или сафари), где я получаю синий цвет системы (http://cl.ly/image/031C2R1Q2l2i):

::selection { background: #f7a494; }
input::selection {  background: #f7a494; }

Любая помощь? Я огляделся вокруг переопределения -webkit, но не смог найти соответствующее свойство.

Ответы

Ответ 1

Я тестировал это на своем Mac в Chrome 51.0.2704.103 и Safari 9.1.1 (11601.6.17), и, похоже, это уже не проблема. Нет необходимости в input:: selection, как предложил OP, код, необходимый для этого:

::selection{
  background: #f7a494;
}

::-moz-selection{
  background: #f7a494;
}

Если у вас все еще есть эта проблема, попробуйте следующую скрипту, если она работает, может быть что-то еще в вашем коде, которая мешает ей.

https://jsfiddle.net/nLftpwjc/

Proof

введите описание изображения здесь

Ответ 2

bcz, webkit следует за rgba вместо # 123456

попробуйте следующее:

input:: selection {background: rgba (231,105,105,0.7)}

Ответ 3

Я только что искал это и заметил, что вы можете просто использовать селектор :focus, чтобы определить сфокусированное поле ввода CSS. Вот так:

input:focus {  background: #f7a494; }

Надеюсь, что это поможет.