html - 焦点文本区域上的 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;


    }

这是它在浏览器上的样子

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

Answer 1

尝试设置以下内容:

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

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