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

Question

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

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

Answer 1

Если вы ищете это:

Вот ссылка:

http://css -tricks.com / переопределение-The-умолчанию текстовый выбора цвета-с-CSS /

Answer 2

это код.

/*** 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;
}

Answer 3

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

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

Answer 4

Все ответы здесь верны, когда речь идет о псевдоэлементе ::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>

Answer 5

Вот руб:

    ::selection {
      background: #ffb7b7; /* WebKit/Blink Browsers <em>/
    }
    ::-moz-selection {
      background: #ffb7b7; /</em> 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;
    }

Обратите внимание, что селекторы не объединены, даже если> блок стиля делает то же самое. Это не сработает, если вы их объедините:

<code><pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}

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

DEMO

СВЯЗЬ ГДЕ ИНФОРМАЦИЯ ОТ

Answer 6

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

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>

Вот измененный стиль рамки:

input:focus, textarea:focus {
    border:2px dotted red;
}

#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>

Answer 7

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

/* For Mozile Firefox Browser */

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

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

Answer 8

@ Майк Энг,

При выборе цвета фона текста цвет текста можно изменить с помощью :: selection , обратите внимание, что :: selection работает в Chrome, чтобы это работало в Браузеры на базе 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
}

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

Answer 9

Полагаю, это может помочь:

выбор стиля

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

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

Это абзац с 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

Answer 10

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

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

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