4

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...

Akshay Mulgavkar
  • 1,727
  • 9
  • 22
GNG
  • 1,341
  • 2
  • 23
  • 50
  • 1
    I realize this is related to the Chrome autocomplete settings. This Stack overflow discussion is about this. https://stackoverflow.com/questions/55131944/how-to-remove-blue-background-on-chrome-autocomplete – GNG Jun 25 '19 at 01:31
  • 1
    have a look at https://stackoverflow.com/a/14205976/4882013 for css solution. – Shiv Kumar Baghel Jun 25 '19 at 03:04

1 Answers1

1

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>
Prasanth
  • 109
  • 4