Question

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

例如：

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>

谢谢！

Answer 1

尝试在输入中添加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

Answer 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

Answer 3

简单 - 请参阅演示：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>

更改焦点选择文本字段的高亮颜色

3 个答案: