How to avoid Chrome hide background image and color over an autofill input
You CAN NOT Override the autocomplete code, since it's being controlled by user agent stylesheet, take a look at cascading-order to know more.
Here is the code (i've copied from google chrome) that is making your icons disappear on autocomplete, just in case you were wondering:
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
So what now? If you are intent on solving icons disappearing problem here is a hack that you can do it for you:
.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>Here you can use any color e.g.
white,#DDD,rgba(102, 163, 177, 0.45).
For Background: transparent won't work here so please use colors.
/* 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;
}
for text color:
/*Change text in autofill textbox*/
input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}
Your Solution:(for above case)
Use separate div for icon and for 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>