CODEWITHSUNDEEP
css
rod james
rod james

Reputation: 449

Disable highlight with CSS

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?

Upvotes: 3

Views: 1015

Answers (1)

Jakir Hossen
Jakir Hossen

Reputation: 461

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>

Upvotes: 2

Related Questions