Disable highlight with CSS

Question

Good day SO. I would like to disable highlighting on my disabled input text fields. I found a working answer on this SO Answer and tried to implement on my code. However, it does not work on my end. I don't know what I am doing wrong.

input[type="text"]:disabled {
  background-color: red;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  text-overflow: ellipsis;
}

<input type="text" class="someclass" value="some value that is very long long long" disabled="disabled" style="width: 100px;">

Note. I also added background-color to check if selector is correct and it does change color.

The reason why I want to do this is the text value is longer than the text itself, there is a ellipsis at another class with this. If I double click on the text and slide to the right, the text vanishes.

Note. if disabling highlight inside the input text field, can I make it that when users highlight the text and then drag to the right, the text does not move?

https://stackoverflow.com/questions/54276353/how-to-make-an-input-field-unselectable/54276392 — Rafee, Mar 31 '21 at 04:53
Are you able to add a helper HTML element in your form? Then you can use it to overlap the input field when it is disabled, making the input not clickable or select able with a mouse a click — AugustoM, Mar 31 '21 at 04:58

score 2 · Answer 1 · answered Mar 31 '21 at 05:28

2

You can not do this using the only css while your button is disabled.

You can try the help of javascript.

<!DOCTYPE html>
<html>
  <head>
    <style>
      input{
          background-color:red;
      }
    </style>
  </head>
  <body>

    <input type="text" id="unselectable" value="You can not select this text!"/>
    
    <script>
    document.getElementById("unselectable").addEventListener("mousedown", function(event){
      event.preventDefault();
    });
    </script>

  </body>
</html>

answered Mar 31 '21 at 05:28

Jakir Hossen

451
4
13

Thank you. Instead of using CSS, this is now currently working on my end – rod james Mar 31 '21 at 06:46
This is a clever solution. The only caveat I'll note is that you can still select the text in the input if you click _outside_ the input and then drag your mouse across/over it. However, besides that edge this works well. – Alexander Nied Mar 31 '21 at 14:13

Disable highlight with CSS

1 Answers1