How to stop text highlight in HTML form fields

Question

After spending some time on Google I came here to get solution. What I have to do is to stop the text highlight of an input field(HTML form fields) when user select using cursor. If user tries to select whole or part of text in an input field cursor should stop at the index where user starts the mouse left click. Something like this

This should not

This should

User should be able to locate the cursor in any index user wants but user should not be able to highlight text. I am not pro-expert in CSS. Any solution for this? JS solution would be the usage of setSelectionRange or createTextRange.

Any best CSS or JS solution please.

Answer 1

I hope its not possible to stop the highlight, well instead you can apply a trick to change the background color of the highlight to the textfield background color.

When the background colors would be same then it would not be highlighted, here ios the code to achieve the same :-

View Demo at jsfiddle .

CSS

input::selection {
background: #fff; 
}
input::-moz-selection {
background: #fff; /* Firefox lower versions */
}