illustrate
Original effect, without autofill input
effect:
With autofill passwords, the entire input
is changed to the browser default style. input
In fact, it is a cover on the original hole input
, which is troublesome...
After modification:
CSS
input:-webkit-autofill: autofill class
class name;
-webkit-box-shadow: Use the box shadow to block the input background color;
border-radius: must be set to 0, the default is radian;
width: the length is consistent with the original input, depending on the actual situation;
padding-left: The spacing on the left side of the font is consistent with the original font spacing, depending on the actual situation;
input:-webkit-autofill {
-webkit-box-shadow: 0px 0px 0px 20px rgb(32,85,104) inset;
-webkit-text-fill-color: #fff;
border-radius: 0;
width: 240px;
padding-left: 46px;
}
If you still don't know how to set the browser's autofill password, you can refer to: "Browser Autofill and Password (Google and Edge)"