更改焦点选择文本字段的突出显示颜色[重复]答案

【问题标题】：change focus select highlight color of text field [duplicate]更改焦点选择文本字段的突出显示颜色[重复]
【发布时间】：2014-09-16 08:12:14
【问题描述】：

如何更改从文本输入字段中选择数据时应用的标准突出显示颜色？

例如：

1.) 用户单击文本字段框。 2.) 内容被突出显示。 3.) 我想改变这个颜色。

这是我的代码：

<input type="text" value="<?php echo $url;?>" size="40" id="selecturl"/><br/><br/>

<script language="JavaScript">
 jQuery(document).ready(function(){
    jQuery('#selecturl').focus();
    jQuery('#selecturl').select();
});
</script>
<style>
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}   
</style>

谢谢！

【问题讨论】：

您的问题含糊不清。当您说“灰色突出显示颜色”时，请具体说明您的意思。诸如文本输入之类的 UI 元素也可能因浏览器而异。编辑：另外，您有任何 CSS 供我们查看吗？

标签： javascript php jquery html highlight

【解决方案1】：

简单 - 查看演示：http://jsfiddle.net/Intacto/k8L6u/

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
    input[type=text]:focus {
        background-color: lightblue;
        box-shadow: 0 0 5px indigo;
        border: 1px solid indigo;
    }
    input::selection { background:black; color: white;}
    input::-moz-selection { background:black; color:white; }
    input::-webkit-selection { background:black; color:white; }
  </style>
</head><body>

  <input type="text" value="<?php echo $url;?>" size="40" id="selecturl"/><br/><br/>

  <input type="text" value="URL" size="40" id="selecturl"/><br/><br/>

</body></html>

【讨论】：

【解决方案2】：

如果您想更改 tex 的突出显示颜色，您可以尝试使用 CSS3。

::selection { background:#B9B9B9; color:#000000; }
::-moz-selection { background:#B9B9B9; color:#000000; }
::-webkit-selection { background:#B9B9B9; color:#000000; }

我做了一个 jsfiddle 例子：http://jsfiddle.net/QPLqQ/

参考：https://stackoverflow.com/a/3482668/3625883

【讨论】：

【解决方案3】：

尝试在输入中添加一个 id，例如 id="input"，而不是在你的 css 文件中添加这一行

#input { outline-color: red; }

或者您也可以在不添加任何 ID 的情况下执行此操作，但这会影响您页面中的所有输入

input { outline-color: red; }

如果你想使用 jQuery 来做到这一点：

$("#input").css("outline-color","red"); // with id
$("input").css("outline-color","red"); // witout id

jsFiddle

【讨论】：