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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

重要的是不能追随;所以..

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

就是这样。

但更好的解决方案是使用id #search而不需要！important

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

2 个答案: