如何在警报时对require输入框的边框进行样式化

Question

见下图：

我想要对红色框阴影进行样式化，例如更改它的颜色。

修改 当我们使用这样的代码时：

 <input type="text" name="example" required>

如果用户单击提交按钮而未完成所需的框，则会发出警告！我想改变默认的阴影颜色。

Answer 1

您应该使用box-shadow CSS属性：

input { box-shadow: 0 0 10px red; }

JSFiddle

Answer 2

input:invalid {  
    box-shadow:0 0 0px #f00;
}

将覆盖阴影。

但请注意，此处输入的样式将在提交表单之前设置任何所需的样式。因此，我怀疑您可能需要在提交时运行javascript，这会在表单中添加一个类，以便样式仅在提交后出现。例如，设置它以便提交表单将一个名为“submittedform”的类添加到表单中，然后添加样式。

.submittedform input:invalid {  
    box-shadow:0 0 0px #f00;
}

（可能有html5方式这样做，但我认为没有）