Изменение цвета подсветки при выборе текста при вводе текста в формате HTML

Я искал это в Интернете и даже не могу найти кого-либо еще, даже спрашивая об этом, не говоря уже о решении...

Есть ли способ изменить цвет области выделения в текстовом вводе при выборе текста? Не выделенная граница или фон, а часть, которая появляется вокруг текста, когда у вас действительно выбранный текст.

Ответы

Ответ 1

Спасибо за ссылки, но похоже, что фактическое выделение текста просто не отображается.

Что касается актуальной проблемы, я решил выбрать другой подход, исключив необходимость в текстовом вводе и используя innerHTML с некоторым JavaScript. Он не только оборачивается выделенным текстом, но и выглядит намного чище.

Эта гранулярность настройки для управления формой HTML является еще одним хорошим аргументом для полного устранения элементов управления формами. Ха-ха!

Ответ 3

это код.

/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}

Ответ 4

Я понимаю, что это старый вопрос, но для любого, кто его встречает, это можно сделать, используя contenteditable, как показано в этом JSFiddle.

Престижность к Алексу, который упомянул об этом в комментариях (я этого не видел до сих пор!)

Ответ 5

Все ответы здесь верны, когда речь заходит о псевдоэлементе ::selection и о том, как это работает. Тем не менее, на самом деле вопрос задает вопрос о том, как использовать его для текстовых входов.

Единственный способ сделать это - применить правило через родительский элемент ввода (любой родитель, если на то пошло):

.parent ::-webkit-selection, [contenteditable]::-webkit-selection {
	background: #ffb7b7;
}

.parent ::-moz-selection, [contenteditable]::-moz-selection {
	background: #ffb7b7;
}

.parent ::selection, [contenteditable]::selection {
	background: #ffb7b7;
}

/* Aesthetics */
input, [contenteditable] {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}
<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

Ответ 6

Здесь находится rub:

    ::selection {
      background: #ffb7b7; /* WebKit/Blink Browsers /
    }
    ::-moz-selection {
      background: #ffb7b7; / Gecko Browsers */
    }
В селекторе выбора цвет и фон являются единственными свойствами, которые работают. Что вы можете сделать для некоторого дополнительного таланта, это изменение цвета выделения для разных абзацев или разных разделов страницы.

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

    p.red::selection {
      background: #ffb7b7;
    }
    p.red::-moz-selection {
      background: #ffb7b7;
    }
    p.blue::selection {
      background: #a8d1ff;
    }
    p.blue::-moz-selection {
      background: #a8d1ff;
    }
    p.yellow::selection {
      background: #fff2a8;
    }
    p.yellow::-moz-selection {
      background: #fff2a8;
    }
Обратите внимание, что селекторы не объединены, хотя > блок стиля делает то же самое. Он не работает, если вы их объединяете: 
<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}</pre>

Что, поскольку браузер игнорирует весь селектор, если есть его часть, они не понимают или недействительны. Есть некоторые исключения из этого (IE 7?), Но не в отношении этих селекторов.

DEMO

LINK WHERE INFO FROM FROM

Ответ 7

@Майк Энг,

При выборе цвета фона текста цвет текста можно изменить с помощью :: selection, обратите внимание, что :: selection работает в хроме, чтобы сделать это работа в браузерах, основанных на firefox, попробуйте этот :: - moz-selection

Попробуйте следующий фрагмент кода в reset.css или на странице css, где именно вы хотите применить эффект.

::selection{
   //Works only for the chrome browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

::-moz-selection{
   //Works for the firefox based browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

Вышеприведенный код будет работать даже в поле ввода.

Ответ 8

Кажется, что когда вы определяете границу внутри объявления стиля псевдоэлемента фокуса, он использует его вместо обычной синей рамки. Используя это, вы можете определить стиль, который точно соответствует границе элемента.

input:focus, textarea:focus {
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

Ответ 9

Попробуйте использовать этот код:

/* For Mozile Firefox Browser */

::-moz-selection { background-color: #4CAF50; }

/* For Other Browser*/
::selection { background-color: #4CAF50; }

Ответ 10

Я думаю, это может помочь:

стили выделения

Можно определить цвет и фон для текста пользователя выбирает.

Попробуйте это ниже. Если вы выберете что-то, и это выглядит так: браузер поддерживает стили выбора.

Это абзац с normal ::selection.

Это абзац с ::-moz-selection.

Это абзац с ::-webkit-selection.

Testsheet:

p.normal::selection {
  background:#cc0000;
  color:#fff;
}

p.moz::-moz-selection {
  background:#cc0000;
  color:#fff;
}

p.webkit::-webkit-selection {
  background:#cc0000;
  color:#fff;
}

Цитата из Quirksmode