change focus select highlight color of text field

Question

How do I change the standard highlight color that is applied when you select the data from a text input field?

For example:

1.) User clicks on the text field box. 2.) The contents get highlighted. 3.) I'd like to change this color.

Here is my code:

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

Thanks!

Your question is vague. Please specify what you mean when you say "grey highlight color." UI elements such as text inputs can also differ between browsers. EDIT: also, do you have any CSS for us to look at? — Jason, Jul 24 '14 at 16:38

Khalid · Answer 1 · 2014-07-24T16:49:31.307

1

Try to add an id to the input like id="input" than add this line in your css file

#input { outline-color: red; }

or you can also do this witout adding any id, but it will affect all your inputs in your page

input { outline-color: red; }

If you want to do this using jQuery :

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

jsFiddle

edited Jul 24 '14 at 16:49

answered Jul 24 '14 at 16:41

Khalid

4,730
5
27
50

1

Maybe it did not answer the question, but it's useful for me :) – Míng Aug 01 '22 at 15:26

Intacto · Accepted Answer · 2014-07-24T17:15:08.123

easy - see demo: 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>

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

If you want to change the highlight color for a tex you can try with CSS3.

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

I made a jsfiddle example: http://jsfiddle.net/QPLqQ/

reference: https://stackoverflow.com/a/3482668/3625883

edited May 23 '17 at 12:11

Community

1
1

answered Jul 24 '14 at 16:43

Filo

2,829
1
21
36

change focus select highlight color of text field

3 Answers3