使用CSS禁用高亮显示

Question

使用CSS禁用高亮显示

3

大家好。我希望能禁用已禁用的输入文本字段的高亮显示。我在这个 SO答案中找到了一个可行的解决方案，并尝试在我的代码中实现它。然而，它在我的端上没有起作用。我不知道我做错了什么。

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

注意：我还添加了背景颜色来检查选择器是否正确，确实改变了颜色。

我想这么做的原因是文本值比文本本身要长，在另一个类中有省略号。如果我双击文本并向右滑动，文本就会消失。

注意：如果禁用输入文本字段中的高亮显示，我能否使用户在突出显示文本并向右拖动时文本不移动？

- rod james

https://dev59.com/6iwAtIcB2Jgan1znR6tj#54276392 - Rafee

你能在表单中添加一个辅助的HTML元素吗？然后，当输入字段被禁用时，您可以使用它来重叠输入字段，使其不可通过鼠标点击进行选择或点击。 - AugustoM

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jakir Hossen · Accepted Answer

如果按钮被禁用，仅使用CSS无法完成此操作。

您可以尝试使用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>