如何更改必填输入字段的边框颜色? [英] how to change border color of required input fields?

问题描述

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

I'm trying to change browser's default border style for required field which uses box-shadow in firefox and outline in chrome.

所以，我这样做:

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

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

But this shows red border already on load of the window. But I wanted it to be red only when it's invalid.

演示

我该如何解决问题?

推荐答案

因为我们只想将其表示为焦点就表示无效.您可以尝试使用以下代码:-

Since we only want to denote it invalid once it has focus. you could try code like:-

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

此处演示

这篇关于如何更改必填输入字段的边框颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！