Html Question posted in
Some basic documentation can be found here.

Html – How to change color of input or bootstrap autofill of this class(input#email.form-control)

Basically I wanted to change the color of input fields when using browsers autofill or saved emails (dropdown of previously used emails in the same input box). For that I was using these css properties.

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: black !important;
}
<div class="row">
  <div class="col-md-12">
    <label for="email">Email:</label>
  </div>
  <div class="col-md-12">
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
</div>

But the issue was still there when i was selecting any autofilled/saved email from the dropdown it changes the input field background to blueish whereas I wanted to keep it white/transparent.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue resolved after using this css property

    input:-webkit-autofill { 
    -webkit-background-clip: text;
  }

    Issue Screenshot

    See when the issue was resolved using this css property


  2. 0

    You can customize both the input box and the text inside it.

    You can choose colors like white, #DDD, or rgba(102, 163, 177, 0.45).

    But, transparent won’t work here

    /* 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;
}
    <div class="row">
  <div class="col-md-12">
    <label for="email">Email:</label>
  </div>
  <div class="col-md-12">
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search