css - 如何将单独的 FOCUS 样式应用于两个输入字段

Question

我正在使用 CSS 来设置输入字段的样式。

但我想为不同的输入字段使用不同的样式，但似乎我只能在 CSS 中设置一个输入样式焦点。

我目前正在使用这段代码来设置输入焦点的样式:

input[type=text]:focus, textarea:focus , input[type=password]:focus{
  box-shadow: 0 0 5px rgba(229, 47, 22, 1);
  padding: 8px 3px 8px 58px;
  margin: 5px 1px 10px 0px;
  border: 1px solid rgba(229, 47, 22, 1);
}

现在，当我想为另一个输入字段覆盖这种样式时，我试图通过将其添加到该输入字段的类中来实现:

.search
{
  box-shadow: 0 0 2px rgba(211, 211, 211, 211); !important;
}

浏览器如果忽略这个覆盖并且仍然显示红色阴影。

我确信有出路，但似乎找不到正确的方法。欢迎任何帮助或建议:)

Answer 1

要正确覆盖样式设置，请使用更具体的选择器，例如

input[type=text]:focus, textarea:focus , input[type=password]:focus{
  box-shadow: 0 0 5px rgba(229, 47, 22, 1);
  padding: 8px 3px 8px 58px;
  margin: 5px 1px 10px 0px;
  border: 1px solid rgba(229, 47, 22, 1);
}

input[type=text].search:focus
{
  box-shadow: 0 0 2px rgba(211, 211, 211, 211); 
}

<input type=text>
<input type=text class=search>