删除焦点上的蓝色高亮文本

Question

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

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

Answer 1

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

＆＃13;

＆＃13;

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 */      
}

＆＃13;

<input type="text">

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;