How to remove input text value selection highlighting with CSS?

Question

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

How about input[type="text"]::selection { background-color: transparent } ? — VilleKoo
– VilleKoo, Commented Sep 10, 2019 at 8:28
why not use disabled syntax in input directly like <input type="text" disabled> — Japs
– Japs, Commented Sep 10, 2019 at 8:28
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
– misorude, Commented Sep 10, 2019 at 8:29
Possible duplicate of How to remove the border highlight on an input text element — Pablo Igarzábal
– Pablo Igarzábal, Commented Sep 10, 2019 at 8: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
– Mireko, Commented Sep 10, 2019 at 9:52

kiranvj · Accepted Answer · 2019-09-10 08:29:03Z

2

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

answered Sep 10, 2019 at 8:29

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

misterManSam Over a year ago

This answers the question... but the whole concept of not indicating text is highlighted / selected is terrible!

misterManSam Over a year ago

If you want to be extra terrible, then use cursor: pointer as well.

Mireko Over a year ago

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

kiranvj Over a year ago

@Mire2030 With CSS no. With JavaScript yes. Take a look at this stackoverflow.com/a/29222158/1188322

piouson Over a year ago

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!

|

Collectives™ on Stack Overflow

How to remove input text value selection highlighting with CSS?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related