Bootstrap 有一个“invalid-feedback”类，当用户输入无效输入时会发出警告。例如，如果输入字段的类型为“email”，那么“invalid-feedback”会在用户输入除电子邮件以外的其他内容时发出警告。
那么如何在无效的反馈类上设置我的自定义条件？比如说我想只使用 .jpeg 图像来限制输入，如果用户提供其他格式的输入数据，那么它会抛出警告。
【问题讨论】：
标签： html bootstrap-4
首先，您不能使用与核心框架相同的类名。尝试一些类似的名称，例如custom-invalid-feedback 并重新设计 CSS 文件中的元素。
.custom-invalid-feedback{
heigth : 200px;
width : 200px;
color : #333;
//Do Else Stuff Here
}
在必需元素中使用此类名称，我建议仅在需要时使用!important 属性。
【讨论】：
仅使用 css 你是有限的。一个例子：
input {
border: 2px solid;
border-radius: 4px;
font-size: 1rem;
margin: 0.25rem;
min-width: 125px;
padding: 0.5rem;
transition: background-color 0.5s ease-out;
}
input:optional {
border-color: gray;
}
input:required {
border-color: black;
}
input:invalid {
border-color: red;
}<form action="#">
<input type="text" placeholder="First Name" required>
<input type="email" placeholder="Email" required>
<input type="text" placeholder="Nickname">
<input type="text" placeholder="Favorite pizza topping">
<input type="file" name="myImage" accept="image/gif" required/>
</form>更多选项最好使用更复杂的东西，比如 JS 或 Sass。
【讨论】：