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

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

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

10 ответов


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

вот ссылка:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/


этот код.

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

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

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


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

вот в чем загвоздка:

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

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

демо

ССЫЛКА, ГДЕ ИНФОРМАЦИЯ ИЗ


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

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

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


@ Mike Eng,

при выборе цвета фона текста Цвет текста может быть изменен с помощью :: 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
}

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


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

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>

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

/* For Mozile Firefox Browser */

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

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

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

стили

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

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

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