Changing The Highlight Color When Selecting Text in an HTML Text Input

Changing the highlight color when selecting text in an HTML text input

Thanks for the links, but it does seem as if the actual text highlighting just isn't exposed.

As far as the actual issue at hand, I ended up opting for a different approach by eliminating the need for a text input altogether and using innerHTML with some JavaScript. Not only does it get around the text highlighting, it actually looks much cleaner.

This granular of a tweak to an HTML form control is just another good argument for eliminating form controls altogether. Haha!

How to change the highlight color of selected text in a textarea, using selection range?

I don't understand exactly what you want.

Did you want an answer like the code below?

https://codepen.io/jyh7a/pen/xxpLMZZ

HTML

<input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>

<hr/>

<textarea rows="6" cols="40">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</textarea>

<hr/>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</p>

CSS

::selection {
    background-color: rgba(255,0,0,0.2);
}

function selectText() {
  
  const input = document.getElementById('text-box');  
  input.focus();
  input.setSelectionRange(2, 5);

  setTimeout(() => {
    const textarea = document.querySelector('textarea');
    textarea.focus();
    textarea.setSelectionRange(0, 20);
  }, 1000)
  
     
  // // ERROR! 
  // // setSelectionRange function only use HTMLInputElements
  // const p = document.querySelector('p');
  // p.setSelectionRange(0, 20);
}

I searched for setSelectionRange

I made the above example by looking at the MDN official documentation.

(Link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange )

Hope the above code was helpful to you.

change focus select highlight color of text field

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>

How to change the highlight color of textbox using focus selector in css

Obviously it won't work as your selector is wrong, you are using .element text which selects an element of ~~<text>~~(Invalid tag) which is nested inside element having a class .element it should be

.element.text:focus
      --^--
 /* No space as well */

Demo

Demo 2 (Making it lil cleaner)

Demo 3 (Animating the :focus)

span input[type="text"]:focus { /* You can also use .element.text:focus here */
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Html Css change Date input highlight color

If I find a 'non-webkit' solution I will update this.

Credit to dboskovic on the Zurb GitHub repo:

input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: red;
    color: white;
    outline: none;
}

Changing The Highlight Color When Selecting Text in an HTML Text Input