焦点textarea上的CSS Glow无法正常工作

Question

嗨，我正在设计一个网站并在我的CSS上遇到麻烦我对这个css事情有点新鲜，有点奇怪我为输入文本制作的css规则在我的文本区域上工作不正常这里是我的CSS

input[type="text"], textarea {
        background: rgba(255,255,255,0.3);
        border: none;
        border-radius: 4px;
        padding: 2%;
        color: white;
    }
    input[type=text]:focus, textarea:focus {
             box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;


    }

这就是它在浏览器上的样子

文本字段名称具有正确的发光但奇怪的是，textarea并未考虑它们都与我在上面的代码上粘贴的规则相同。

Answer 1

尝试设置以下内容：

input[type=text]:focus, textarea:focus {
  box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;
  outline: none;
}

有些浏览器会自动在输入，文本区域等上设置轮廓，这很可能是导致问题的原因。将大纲设置为none应该可以消除此行为。

Answer 2

这是因为输入有默认样式，设置样式时，可以重置焦点样式：

    *:focus {outline: none;}