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

简单，专注于从输入[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>

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

1 个答案: