Question

我尝试更改浏览器的默认边框样式以获取必填字段，该字段在firefox中使用box-shadow并在chrome中使用大纲。

所以，我这样做：

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

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

demo

我该如何解决这个问题？

Answer 1

应删除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

Answer 2

因为一旦它有焦点我们只想表示它无效。您可以尝试以下代码： -

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

DEMO HERE

Answer 3

没有颜色：

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

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

3 个答案: