2

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

enter image description here

This should

enter image description here

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.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Faizul Hasan
  • 625
  • 1
  • 7
  • 17
  • 3
    May I know why this question is being down-voted? – Faizul Hasan Feb 08 '13 at 05:22
  • Possible duplicate: http://stackoverflow.com/questions/1599585/styling-the-selection-color-of-an-input-type-text-possible – Uooo Feb 08 '13 at 05:29
  • @w4rumy Thanks to pointed out. I was searching on Google for long time and I could not find that answer. By the way please understand my question is not to change the highlight color. STOP TEXT BEING HIGHLIGHTED AND KEEP THE CURSOR IN THE INDEX WHERE STARTED TO HIGHLIGHT. I hope you didn't misunderstand. Thanks for Subhajit, I will check your solution. – Faizul Hasan Feb 08 '13 at 05:32
  • if you (could) set the Highlight color to the background color of the textbox, it looks like not beeing highlighted. – Uooo Feb 08 '13 at 05:35
  • 1
    @w4rumy if the user clicks in backspace or delete key what will happen? User have no awareness whether the text is being highlighted or not. Accidently if user clicks on backspace or delete it will remove all the text highlighted even though highlight is not shown. That is the reason stop highlight and keep the cursor at that index – Faizul Hasan Feb 08 '13 at 05:40
  • I thought you have already a solution that your text gets unselected after the user has selected it, and you just want to avoid the color the user sees during selecting text? – Uooo Feb 08 '13 at 05:42
  • may be this will help you http://stackoverflow.com/questions/1319126/prevent-highlight-of-text – Kingk Feb 08 '13 at 06:35

1 Answers1

-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 */
}
Subhajit
  • 1,929
  • 3
  • 19
  • 21
  • This is not working in Chrome and Internet Explorer. It seems like only Firefox supports this. – Uooo Feb 08 '13 at 05:33
  • This is working but in case if the user clicks on backspace or delete button it removes the text since text is being highlighted but highlight is not visible.. :( – Faizul Hasan Feb 08 '13 at 05:55