Input background (image) gets removed after selection of suggestion-CodePudding

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 >
    <label > Email </label>
    <input id="username" name="username" type="text"  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.

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

CodePudding user response：

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;
}

CodePudding user response：

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

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;
}

CodePudding user response：

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 >
    <label > Email </label>
    <input id="username" name="username" type="text"  autocomplete="off" required>
</div>

CodePudding user response：

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 >
      <label  for="email"> Email </label>
      <div >
        <input
          id="email"
          name="email"
          type="email"
          
          required
        />
      </div>
    </div>