时间戳

首页 > 解决方案 > required 属性在 Chrome 中不起作用，但在 FireFox 中起作用

html - required 属性在 Chrome 中不起作用，但在 FireFox 中起作用

问题描述

我正在使用引导程序进行样式设置，并且我没有定义任何自己的类。由于 FireFox 正在工作，我相信我使用的结构是正确的。但是 Chrome 并不高兴，而且我对两者之间的细微差别了解得不够多，无法追踪它。“状态”下拉列表的必需属性也不起作用，但我认为这是另一个问题。

我遇到了一篇文章，描述了当应用程序 url 为 ssl 时，Chrome 如何不会加载非 ssl 脚本，但这不应该适用，因为我正在使用 ng serve 并且我的 url 不安全。否则，与所需属性相关的所有文章都与 FireFix 上的故障有关，这是我遇到的相反情况。

FireFox: 86.0.1 (64-bit)
Chrome:  89.0.4389.90 (Official Build) (64-bit)

浏览器渲染之间差异的视觉描述

从组件 html

<div class="row">
  <div class="col-md-5 mb-3">
    <label for="{{idPrefix}}City">City</label>
    <input type="text" class="form-control" id="{{idPrefix}}City" placeholder="" required [(ngModel)]="model.City">
  </div>
  <div class="col-md-4 mb-3">
    <label for="{{idPrefix}}state">State</label>
    <select class="custom-select d-block w-100" id="{{idPrefix}}state" required [(ngModel)]="model.State">
      <option value="">Choose...</option>
      <option *ngFor="let State of StateArray" value="{{State.abbreviation}}">{{State.name}}</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <label for="{{idPrefix}}zip">Zip</label>
    <input type="text" class="form-control" id="{{idPrefix}}zip" placeholder="" required [(ngModel)]="model.Zip">
  </div>
</div>

索引.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

标签： htmlgoogle-chromefirefoxrequired-field

解决方案

通常 chrome 不会为无效输入创建此红色边框。您可以手动添加一些 css 来创建该边框：

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:invalid {
  background-color: #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

但老实说，我不知道你会如何单独使用 bootsrap 来做到这一点。

推荐阅读