删除焦点上的蓝色突出显示文本答案

【问题标题】：Removing blue highlighted text on focus删除焦点上的蓝色突出显示文本
【发布时间】：2016-01-17 23:37:42
【问题描述】：

当我打开模态窗口时，textarea 中的 onfocus 文本值以蓝色突出显示。我不确定应该使用哪些 CSS 属性从文本中删除突出显示的 onfocus 蓝色。我尝试了以下方法，但它不起作用。

input[type="text"], textarea{
    outline: none;
    box-shadow:none !important;
    border:1px solid #ccc !important;
}

【问题讨论】：

试试这个:focus {outline:none;}stackoverflow.com/questions/2943548/…

标签： html css

【解决方案1】：

您可以使用user-select 来避免选择任何文本

input {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

&lt;input type="text"&gt;

注意这一点，因为您避免为用户选择提示，这会导致可访问性丢失。

【讨论】：

它在 chrome 版本 74.0.3729.169 上显示高亮颜色

【解决方案2】：

user-select 属性suggested by Marcos 的替代方法是使用::selection 和::-moz-selection（根据他们自己的规则）专门设置/取消设置选定对象的颜色/背景文本（不禁用选择功能）。

input[type="text"]::selection,
textarea::selection {
  background-color: inherit;
  color: red;
}
input[type="text"]::-moz-selection,
textarea::-moz-selection {
  background-color: inherit;
  color: red;
}

input[type="text"],
textarea {
  outline: none;
  box-shadow: none !important;
  border: 1px solid #ccc !important;
}

<input type="text" value="test value for selection" />
<hr/>
<textarea>test text for selection</textarea>

【讨论】：