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

Posted 2023-03-06

【中文标题】删除焦点上的蓝色突出显示文本

【英文标题】：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;***.com/questions/2943548/…

【参考方案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 */      

<input type="text">

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

【讨论】：

它在 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>