Почему поле ввода пароля в моей HTML-форме имеет светло-синий фон? - PullRequest
0 голосов
/ 25 июня 2019

У меня есть простая форма, которая включает поле ввода пароля с type="password". Форма включает в себя также некоторые другие поля ввода.

По какой-то безумной причине, поле пароля и поле ввода в Chrome имеют светло-синий фон. Не проблема в Firefox. Когда я изменяю тип поля ввода пароля на «текст», то есть type = «текст», фон становится белым по желанию.

Какое правило 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>

Приведенный выше стиль не оказывает влияния ...

1 Ответ

0 голосов
/ 25 июня 2019

Простой, в фокусе удалить контур из ввода [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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...