html - 为什么我的 html 表单的密码输入字段有浅蓝色背景？

Question

我有一个简单的表单，其中包含一个带有 type="password" 的密码输入字段。该表单还包括一些其他输入字段。

出于某些疯狂的原因，Chrome 中的密码字段和输入字段具有浅蓝色背景。在 Firefox 中不是问题。当我将密码输入字段类型更改为“文本”时，即 type="text"，背景为所需的白色。

哪个 css 规则对此负责，我如何覆盖或禁用此规则？这是在 vue.js 文件中。

input[type="password"] {
  background-color: white;
}

<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label class="form-label">Password</label>

      <input type="password" class="form-control" name="example-text-input-invalid is-invalid" placeholder="Password" v-model="user.password" v-bind:pattern="passwordRulesRegex" v-bind:title="passwordRulesText" />
      <!-- <div class="col col-md-1"> -->
      <div class="invalid-feedback">Invalid feedback</div>
    </div>
  </div>
  <div class="col-md-8">
    <label class="form-label">&nbsp;</label>
    <small class="form-text text-muted mt-3">
            Enter a new password, or leave this blank to keep the existing password.
        </small>
  </div>
</div>

上面的样式没有效果...

Answer 1

简单，在焦点上从 input[type="password"] 中删除轮廓 :)

    input[type="password"] {
      background-color: white;
    }
    input[type="password"]:focus{
    outline:0;
    }

    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label class="form-label">Password</label>

          <input type="password" class="form-control" name="example-text-input-invalid is-invalid" placeholder="Password" v-model="user.password" v-bind:pattern="passwordRulesRegex" v-bind:title="passwordRulesText" />
          <!-- <div class="col col-md-1"> -->
          <div class="invalid-feedback">Invalid feedback</div>
        </div>
      </div>
      <div class="col-md-8">
        <label class="form-label">&nbsp;</label>
        <small class="form-text text-muted mt-3">
                Enter a new password, or leave this blank to keep the existing password.
            </small>
      </div>
    </div>