CSS Glow on focus文本区域不能正常工作

Question

嗨，我正在设计一个网站，在我的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;


    }

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

​

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

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