Menu
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?
497
asked Mar 18 '26 08:03
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With