在HTML文本input中select文本时更改高亮颜色

我一直在整个networking寻找这个，甚至找不到任何人，甚至不问这个问题，更不用说解决scheme…

当文本被选中时，有没有办法改变文本input内高亮区域的颜色？ 不是突出显示边框或背景，而是实际选定文本时显示在文本周围的部分。

Answer 1

如果你正在寻找这个：

链接在这里：

http://css-tricks.com/overriding-the-default-text-selection-color-with-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

我意识到这是一个古老的问题，但任何碰到它的人都可以使用这个JSFiddle所示的contenteditable来完成。

亚历克斯在评论中提到了这一点（我直到现在才看到！）

Answer 4

当涉及到::selection伪元素时，所有的答案都是正确的，它是如何工作的。 但是，这个问题实际上确实要问如何在文本input中使用它。

要做到这一点的唯一方法是通过input的父母（任何父母）应用规则：

 .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

这是摩擦：

  ::select{
      背景：＃ffb7b7;  / * WebKit / Blink浏览器/ 
      } 
      ::  -  moz-selection { 
        背景：＃ffb7b7;  /壁虎浏览器* /
     } 

在selectselect器中，颜色和背景是唯一可用的属性。 你可以做一些额外的风格，是改变不同的段落或页面的不同部分的select颜色。

我所做的只是对不同类别的段落使用不同的select颜色：

  p.red::select{
      背景：＃ffb7b7;
     }
     p.red::-moz-selection {
      背景：＃ffb7b7;
     }
     p.blue::select{
      背景：＃a8d1ff;
     }
     p.blue::-moz-selection {
      背景：＃a8d1ff;
     }
     p.yellow :: selection {
      背景：＃fff2a8;
     }
     p.yellow ::  -  moz-selection {
      背景：＃fff2a8;
     } 

请注意，select器是如何组合的，即使style块做同样的事情。 如果将它们结合起来，它不起作用：

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

这是因为浏览器忽略整个select器，如果有一部分select器他们不明白或无效。 这个（IE 7？）有一些例外，但与这些select器无关。

DEMO

链接信息从

Answer 6

感谢您的链接，但它确实似乎突出显示的实际文本没有暴露。

就实际问题而言，我最终select了一种不同的方法，通过完全不需要文本input，并使用带有JavaScript的innerHTML。 它不仅避免了文本突出显示，而且看起来更干净。

这种对HTML表单控件进行微调的细节是完全消除表单控件的另一个好的参数。 哈哈！

Answer 7

@ Mike Eng，

在select文本背景颜色时，文本颜色可以在:: selection的帮助下更改，注意::select在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框中工作。

Answer 8

试试这个代码来使用：

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

Answer 9

我想这可以帮助：

select风格

可以为用户select的文本定义颜色和背景。

试试下面。 如果你select了一些东西，它看起来像这样，你的浏览器支持select样式。

这是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