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

Question

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

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

哪个 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

简单，焦点从输入中删除轮廓[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>