Input background (image) gets removed after selection of suggestion

user_5816119 0
Viewed 186

I have email input with background image as symbol on it. The issue is input works properly if user adds data but if they choose to select suggestions provide by browser, the image just hides.

See below HTML and CSS.

.login-form-email {
    border-radius: 6px;
    background-color: #fff;
    background: url(img/envelop.png) no-repeat scroll 7px 7px;
    padding-left: 40px;
}
 <div class="form-group">
    <label class="short-description"> Email </label>
    <input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>

This snippet might not work but I'll add snapshot of how it looks.

Here is the image 1 on how it looks initially. enter image description here

Now, when I select the autosuggestion, it weirdly looks like this. (See envelop symbol is removed.) enter image description here

css html
4 Answers

this is because of when you select the suggestion value it will be autofill the field and the browser has the default autofill background property.

you have used the sort-hand property for the background so when you autofill the field value the background property will changed.

please use separated properties for that like this way.

.login-form-email {
    border-radius: 6px;
    background-color: #fff;
    background-image: url(img/envelop.png);
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-left: 40px;
}
user_119767690

The problem is that currently the browser's default styling for this can not be overridden, or there is no direct solution to do so, see here: How to avoid "-internal-autofill-selected" style to be applied?

The alternative solution is to use a before element, like so:

.form-group:before {
    content: "";
    background: url(https://emojipedia-us.s3.amazonaws.com/source/skype/289/envelope_2709-fe0f.png) no-repeat scroll 0px 0px;
    padding-left: 20px;
    background-size: 20px 20px;
    z-index: 999;
    position: relative;
    left: 65px;
}
.login-form-email{
    text-indent: 30px;
}
<div class="form-group">
    <label class="short-description"> Email </label>
    <input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>

user_28174420

You can wrap <input/> element in <div> and add styles to div::before. if you do it in this way, your input will be responsive also.

With -webkit-autofill you can change autocomplete styles in Webkit browsers.

.input-wrapper{
 display: inline-block;
 margin-left:-25px;
}
.input-wrapper::before {
    content: "";
    background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
    background-size: 20px 20px;
    padding-left: 30px;
    position: relative;
    left: 15%;
}
.login-form-email{
     border-radius: 6px;
     padding:5px 10px 5px 28px;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
}
<div class="form-group">
      <label class="short-description" for="email"> Email </label>
      <div class="input-wrapper">
        <input
          id="email"
          name="email"
          type="email"
          class="form-control login-form-email"
          required
        />
      </div>
    </div>

user_110804850

if you want to change the background color of auto-filled input you need to use these:

UPDATED:

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;
    background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
}
user_83568560
Related