Reputation: 1376
Chrome Browser auto-fill removed effect of background-color
and background-image
from Username
and Password
input fields.
Before autocomplete
After autocomplete
But Chrome Browser autocomplete hide my icons from inputs and also changed my background-color
. So i need my icons stay on inputs as it is.
It is possible to stop Chrome Browser from change background color of fields and hide images?
.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.sstatic.net/xhx3w.png');
}
.form-section .form-control[type="password"] {
background-image: url('https://i.sstatic.net/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>
Upvotes: 20
Views: 4872
Reputation: 641
Please check if this works for you. I made some changes on your code.
You can check in this 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.sstatic.net/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.sstatic.net/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;
}
Upvotes: 1
Reputation: 372
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.sstatic.net/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.sstatic.net/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>
Upvotes: 1
Reputation: 569
Let's try this code, hope this will helpful to 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;
}
.form-section .form-control[type="email"] {
background-image: url('https://i.sstatic.net/xhx3w.png');
}
@-webkit-keyframes autofill_email {
to {
background-image: url('https://i.sstatic.net/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.sstatic.net/910l0.png');
}
@-webkit-keyframes autofill_pass {
to {
background-image: url('https://i.sstatic.net/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>
If you want remove background color, then add default background-color in keyframe style
Upvotes: 0
Reputation: 1589
/* 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;
}
Credit to @Fareed Alnamrouti from Removing input background colour for Chrome autocomplete?
Upvotes: 0
Reputation: 4912
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.sstatic.net/xhx3w.png');
background-repeat: no-repeat;
background-position: center center;
width: 30px;
height: auto;
}
.icon-pass {
background-image: url('https://i.sstatic.net/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>
Upvotes: 11