CSS modifies browser autofill password default style input

illustrate

Original effect, without autofill inputeffect:

insert image description here

With autofill passwords, the entire inputis changed to the browser default style. inputIn fact, it is a cover on the original hole input, which is troublesome...

insert image description here

After modification:

insert image description here

CSS

input:-webkit-autofill: autofill classclass 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)"

Guess you like

Origin blog.csdn.net/sinat_31213021/article/details/131068641