1

I am trying to disable selection highlighting for the text value in input fields using CSS. I have disabled it for text using the below code, but it doesn't apply to input fields:

.inputTest {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}
ZygD
  • 22,092
  • 39
  • 79
  • 102
Mireko
  • 41
  • 1
  • 4
  • How about `input[type="text"]::selection { background-color: transparent }` ? – VilleKoo Sep 10 '19 at 08:28
  • 1
    why not use `disabled` syntax in input directly like `` – Japs Sep 10 '19 at 08:28
  • 3
    How about not messing with basic UI features to begin with? Text in an input field doesn’t get selected by accident, if I do so, I probably have my reasons. – misorude Sep 10 '19 at 08:29
  • Possible duplicate of [How to remove the border highlight on an input text element](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) – Pablo Igarzábal Sep 10 '19 at 08:46
  • @misorude - I am required to do this for a Vive Focus Android WebView to disable the selection and the context menu, which does not serve any purpose in VR. The CSS works, but unfortunately does not disable the context menu. I have tried numerous solutions in JS, but none of them work. – Mireko Sep 10 '19 at 09:52

1 Answers1

3

Use ::selection Give background color white if your textbox background is white

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Check this demo

input::selection {
  background: #FFF; /* WebKit/Blink Browsers */
}
input::-moz-selection {
  background: #FFF; /* Gecko Browsers */
}
<input type="text" value="Try to highlight me"/>

Reference

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • 1
    This answers the question... but the whole concept of not indicating text is highlighted / selected is terrible! – misterManSam Sep 10 '19 at 08:44
  • If you want to be extra terrible, then use `cursor: pointer` as well. – misterManSam Sep 10 '19 at 08:50
  • @kiranvj - This works in a way that it hides the selection, but is there a way to disable the selection just like: `user-select: none`? – Mireko Sep 10 '19 at 14:17
  • @Mire2030 With CSS no. With JavaScript yes. Take a look at this https://stackoverflow.com/a/29222158/1188322 – kiranvj Sep 11 '19 at 01:48
  • @kiranvj - Thanks. I tried that and it doesn't work on an Android WebView inside a Vive Focus VR headset. Any ideas on how to make it work on that device? – Mireko Sep 11 '19 at 08:49
  • 1
    many thanks for your answer, I'm using material-ui's makeStyles and `input::selection: { background: none }` worked for me! Most other answers just say how to disable input border, hard to find results on input text value! I was working on a custom combobox with read-only `input[type="text"] and decided to use the `placeholder` attribute for value to avoid the text highlight until I found your answer, thank you so much! – piouson Aug 02 '21 at 09:18
  • Keep in mind, that the text is still being highlighted, just not being displayed to the user. If you try to copy some text from the input field, you will be able to, but you just won't see your standard highlight. – Halo Mar 28 '22 at 15:09