Как избежать Chrome скрытия фонового изображения и цвета поверх ввода автозаполнения - PullRequest
Новая
       0

Как избежать Chrome скрытия фонового изображения и цвета поверх ввода автозаполнения

13 голосов
/ 24 января 2020

Chrome Браузер автозаполнение удалено из background-color и background-image полей ввода Username и Password.

До автозаполнения

enter image description here

После автозаполнения

enter image description here

Но Chrome Браузер Автозаполнение скрыть мои значки от входов и также изменил мой background-color. Поэтому мне нужно, чтобы мои значки оставались на входах как есть.

Можно остановить Chrome Браузер от изменения цвета фона полей и скрыть изображения? 

.form-section .form-control {
	border-radius: 4px;
	background-color: #f7f8fa;
	border: none;
	padding-left: 62px;
	height: 51px;
	font-size: 16px;
	background-repeat: no-repeat;
	background-position: left 17px center;
}

.form-section .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-section .form-group {
	margin-bottom: 21px;
}

.form-section .form-control[type="email"] {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
}

.form-section .form-control[type="password"] {
	background-image: url('https://i.stack.imgur.com/910l0.png');
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}
<div class="form-section">
    <form>                                 
        <div class="form-group">
            <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">
		</div>
        <div class="form-group">
            <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
		</div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
    </form>
</div>

Ответы [ 5 ]

8 голосов
/ 24 января 2020

Здесь вы можете использовать любой цвет, например white, #DDD, rgba(102, 163, 177, 0.45).

Для фона: transparent здесь не работает, поэтому используйте цвета. 

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

для цвета текста: 

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Ваше решение: (для вышеприведенного случая)

Используйте отдельный div для значка и для input

.form-section .form-control {
	
	font-size: 16px;
  width: 100%;
  margin-left: 9px;
}

.form-section .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-section .form-group {
	margin-bottom: 21px;
}

.icon-email {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

.icon-pass {
	background-image: url('https://i.stack.imgur.com/910l0.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

.input-txt{
    padding-left: 5px;
    float:left;
    border-left:none;
    outline:none ;
    border: none;
    background-color: #f7f8fa;
}

.custom-input {
    display: flex; 
    border-radius: 4px;
	background-color: #f7f8fa !important;
	border: none;
	height: 51px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f7f8fa inset !important;
}
<div class="form-section">
    <form>                                 
        <div class="form-group custom-input">
        <div class='icon-email'></div>
            <input title="Email" type="email" class="form-control input-txt" name="email" placeholder="Your email address" value="">
		</div>
        <div class="form-group  custom-input">
        <div class='icon-pass'></div>
            <input title="Password" type="password" class="form-control input-txt" name="password" placeholder="Your Password">
		</div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
    </form>
</div>
1 голос
/ 13 февраля 2020

Пожалуйста, проверьте, работает ли это для вас. Я внес в ваш код некоторые изменения.

Вы можете проверить это jsfiddle 

<div class="form-section">
  <form>
    <div class="form-group control">
      <input title="Email" type="email" class="form-control email" name="email" placeholder="Your email address" value="">
      <span class='input-icon'></span>
    </div>
    <div class="form-group control">
      <input title="Password" type="password" class="form-control pass" name="password" placeholder="Your Password">
      <span class='input-icon'></span>
    </div>
    <button type="submit" class="btn btn-primary form-btn">Log in</button>
  </form>
</div>


.form-section .form-control {
    border-radius: 4px;
    background-color: #f7f8fa;
    border: none;
    padding-left: 62px;
    height: 51px;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left 17px center;
}

.form-section .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-section .form-group {
    margin-bottom: 21px;
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

.control {
    position: relative;
}

.email .pass {
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

.email ~ .input-icon {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;

}
.pass ~ .input-icon {
  background-image: url('https://i.stack.imgur.com/910l0.png');  
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

jsfiddle example

1 голос
/ 13 февраля 2020

Вы НЕ МОЖЕТЕ Переопределить код автозаполнения, поскольку он управляется таблицей стилей агента пользователя , посмотрите каскадный порядок , чтобы узнать больше.

Вот код ( я скопировал из Google chrome), который заставляет ваши иконки исчезать при автозаполнении, просто на случай, если вам интересно : 

input:-internal-autofill-selected {
      background-color: rgb(232, 240, 254) !important;
      background-image: none !important;
      color: -internal-light-dark-color(black, white) !important;
    }

И что теперь? Если вы намереваетесь решить исчезающие иконки проблема здесь - это хак , что вы могу сделать это для вас: 

.form-section .form-control {
  border-radius: 4px;
  background-color: #f7f8fa;
  border: none;
  padding-left: 62px;
  height: 51px;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left 17px center;
}

.form-section .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-section .form-group {
  margin-bottom: 21px;
  position: relative;
}

.form-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.form-section .form-control[type="password"] {
  background-image: url('https://i.stack.imgur.com/910l0.png');
}

.form-btn {
  padding: 10px;
  background-color: #65a3fe;
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}
<div class="form-section">
<form>
  <div class="form-group">
    <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">

    <img class="form-icon" src="https://i.stack.imgur.com/xhx3w.png" alt="">
  </div>
  <div class="form-group">
    <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
  </div>
  <button type="submit" class="btn btn-primary form-btn">Log in</button>
</form>
</div>
0 голосов
/ 07 февраля 2020

Давайте попробуем этот код, надеюсь, он вам пригодится 

.form-section .form-control {
  border-radius: 4px;
  background-color: #f7f8fa;
  border: none;
  padding-left: 62px;
  height: 51px;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left 17px center;
}

.form-section .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-section .form-group {
  margin-bottom: 21px;
}

.form-section .form-control[type="email"] {
  background-image: url('https://i.stack.imgur.com/xhx3w.png');
}

@-webkit-keyframes autofill_email {
  to {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
  }
}

.form-section .form-control[type="email"]:-webkit-autofill {
  -webkit-animation-name: autofill_email;
  -webkit-animation-fill-mode: both;
}

.form-section .form-control[type="password"] {
  background-image: url('https://i.stack.imgur.com/910l0.png');
}

@-webkit-keyframes autofill_pass {
  to {
    background-image: url('https://i.stack.imgur.com/910l0.png');
  }
}

.form-section .form-control[type="password"]:-webkit-autofill {
  -webkit-animation-name: autofill_pass;
  -webkit-animation-fill-mode: both;
}

.form-btn {
  padding: 10px;
  background-color: #65a3fe;
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
} 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="py-4">
  <div class="container">
    <div class="form-section">
      <form>
        <div class="form-group">
          <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">
        </div>
        <div class="form-group">
          <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
        </div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
      </form>
    </div>
  </div>
</section>

Если вы хотите удалить цвет фона, добавьте цвет фона по умолчанию в стиле ключевых кадров

0 голосов
/ 06 февраля 2020 
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}


/*Additionally, you can use this to change the text color:*/

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Кредит @Fareed Alnamrouti из Удаление входного цвета фона для Chrome автозаполнение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...