聚焦文本框时的CSS发光效果不正常工作

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;


    }

这是在浏览器上的显示效果：

文本框“Name”有正确的发光效果，但奇怪的是文本域没有考虑到它们都与我上面粘贴的规则相同。

- Kim Oliveros

Answer 1

尝试设置以下内容：

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

一些浏览器会自动在输入框，文本区域等元素上设置一个轮廓线，这很可能是您遇到问题的原因。将轮廓线设置为none应该可以解决此问题。

- thepio

Answer 2

这是因为输入框有默认样式，当你设置自己的样式后，可以重置焦点样式。

    *:focus {outline: none;}

- Anan