如何使用 CSS 删除输入文本值选择突出显示？答案

【问题标题】：How to remove input text value selection highlighting with CSS?如何使用 CSS 删除输入文本值选择突出显示？
【发布时间】：2019-09-10 08:24:40
【问题描述】：

我正在尝试使用 CSS 禁用输入字段中文本值的选择突出显示。我已经使用下面的代码为文本禁用了它，但它不适用于输入字段：

.inputTest {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

【问题讨论】：

input[type="text"]::selection { background-color: transparent } 怎么样？
为什么不直接在输入中使用disabled语法，比如<input type="text" disabled>
不要一开始就搞乱基本的 UI 功能怎么样？输入字段中的文本不会被意外选中，如果我这样做，我可能有我的理由。
How to remove the border highlight on an input text element的可能重复
@misorude - 我需要为 Vive Focus Android WebView 执行此操作以禁用选择和上下文菜单，这在 VR 中没有任何用途。 CSS 工作，但不幸的是没有禁用上下文菜单。我在 JS 中尝试了许多解决方案，但没有一个有效。

标签： html css

【解决方案1】：

如果您的文本框背景为白色，请使用::selection 将背景颜色设为白色

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

查看此演示

input::selection {
  background: #FFF; /* WebKit/Blink Browsers */
}
input::-moz-selection {
  background: #FFF; /* Gecko Browsers */
}

&lt;input type="text" value="Try to highlight me"/&gt;

Reference

【讨论】：

这回答了问题......但是不指示文本被突出显示/选择的整个概念是可怕的！
如果你想变得更可怕，那么也可以使用cursor: pointer。
@kiranvj - 这以隐藏选择的方式起作用，但有没有办法像：user-select: none一样禁用选择？
@Mire2030 使用 CSS 编号。使用 JavaScript 是的。看看这个stackoverflow.com/a/29222158/1188322
非常感谢您的回答，我正在使用 material-ui 的 makeStyles 和 input::selection: { background: none } 为我工作！大多数其他答案只是说如何禁用输入边框，很难找到输入文本值的结果！我正在开发一个具有只读input[type="text"] and decided to use the placeholder` 属性的自定义组合框，以避免在找到您的答案之前突出显示文本，非常感谢！