如何更改所需输入字段的边框颜色？答案

【问题标题】：how to change border color of required input fields?如何更改所需输入字段的边框颜色？
【发布时间】：2014-08-21 11:44:08
【问题描述】：

我正在尝试为必填字段更改浏览器的默认边框样式，该字段在 firefox 中使用 box-shadow，在 chrome 中使用 outline。

所以，我是这样做的：

*{
    box-shadow: none;
    outline: none;
}
input{
    border: 2px solid black;
}
input:invalid{
    border: 2px solid red;
}

但这会在加载窗口时显示红色边框。但我希望它只有在无效时才显示为红色。

demo

我该如何解决这个问题？

【问题讨论】：

请注意，我无法向输入字段添加类...
因为你输入 required 那么它不能为空，因此当页面加载时它是无效的，因为它是空的，这就是为什么它开始是红色的，当你把文本放进去时它会变成黑色

标签： css

【解决方案1】：

因为我们只想在它获得焦点后将其表示为无效。您可以尝试以下代码：-

input:focus:required:invalid {border: 2px solid red;}
input:required:valid { border: 2px solid black; }

DEMO HERE

【讨论】：

是的，我已经尝试过...检查我的答案中的Demo (JSFIDDLE)。
@C-linkNepal 很高兴我能帮助你:)
如果您专注于input，它会起作用。但是，如果您将input 留空，它将再次变回黑色。这是唯一的问题。
这在你添加一些类之前是不可能的。如果你想用JS也可以解决这个问题。
不，我只想要纯 CSS 而不添加类。

【解决方案2】：

没有颜色：

input:required {
    border-color: #ccc !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

【讨论】：

【解决方案3】：

应删除required 以使您的输入有效，否则对于必填字段，您可以执行以下操作

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:valid {
  background: hsla(100, 90%, 70%, 1);
}
input:focus {
  background: hsla(100, 90%, 70%, 1);
}
input:required {
  border-color: #800000;
  border-width: 3px;
}

UPDATED DEMO

RESOURCE

【讨论】：

你还有一个选择input{border: 2px solid black !important;}
我有 focus 到你的小提琴检查更新的答案。