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

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

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

如果你正在寻找这个:

替代文字

链接在这里:

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

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

亚历克斯在评论中提到了这一点(我直到现在才看到!)

当涉及到::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> 

这是摩擦:

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

链接信息从

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

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

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

@ 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框中工作。

试试这个代码来使用:

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

我想这可以帮助:

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