Why does the password input field of my html form have a light blue background?

user_4389737 0
Viewed 1942

I have a simple form that includes a password input field with type="password". The form includes some other input fields as well.

For some crazy reason, the password field and input field have a light blue background in Chrome. Not an issue in Firefox. When I change the password input field type to "text" i.e. type="text", the background is white as desired.

Which css rule is responsible for this and how can I overwrite or disable this rule? This is in a vue.js file.

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>

The styling above does not have an effect...

vue.js forms css html
1 Answers

Simple, On focus remove outline from 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>

user_114365600
Related