元素聚焦时如何删除蓝色矩形？ [复制]

Question

如何在元素获得焦点时移除蓝色矩形？我见过类似的问题，但这些问题链接到外部站点。我的问题包括一个可以在 SO 上测试的 sn-p。

这是我在文本区域获得焦点时得到的结果：

当文本区域被聚焦时，这是我想要的：

这是我到目前为止的代码：

input:focus, textarea:focus {
    outline: none;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

我已经看过这个question。
我也看过这个question。

Answer 1

试试这个：

input:focus, textarea:focus {
   outline: none !important; }

Answer 2

此解决方案更改选定元素的焦点样式的定义边框值。我已经有效地使焦点边框与文本区域边框匹配：

input:focus, textarea:focus {
    outline:none;
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>