Изменение цвета подсветки при выборе текста в текстовом вводе 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