如何修改ASP.NET MVC项目中浏览器自动填充的HTML输入元素样式？

解决方案 #

你写的自定义样式不生效，是因为Chrome、Edge等Webkit内核浏览器会给自动填充的输入框强制添加优先级极高的内置默认样式，普通background-color属性无法直接覆盖，需要使用浏览器专属前缀属性配合!important规则才能生效。

你可以替换成以下CSS代码：

/* 适配Chrome、Edge、Safari等Webkit内核浏览器 */
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control:-webkit-autofill:hover,
.form-floating > .form-control:-webkit-autofill:focus,
.form-floating > .form-control:-webkit-autofill:active {
    /* 通过内阴影覆盖浏览器默认的淡黄色填充背景 */
    -webkit-box-shadow: 0 0 0 30px #dedede inset !important;
    /* 修改自动填充后的文字颜色 */
    -webkit-text-fill-color: #2a2a2a !important;
    /* 覆盖边框颜色 */
    border-color: #2a2a2a !important;
}

/* 如需适配火狐浏览器可添加以下规则 */
.form-floating > .form-control:-moz-autofill {
    background-color: #dedede !important;
    color: #2a2a2a !important;
    border-color: #2a2a2a !important;
}

注意事项 #

• 请将这段CSS放在Bootstrap样式文件的引用之后，保证优先级足够覆盖Bootstrap自带的autofill相关规则
• 如果修改后仍未生效，可以给选择器添加更高优先级的前缀，比如在最前面加上body，即body .form-floating > .form-control:-webkit-autofill
• 如果你使用的是深色主题，只需把代码中的色值替换为你对应主题下输入框的背景色、文字色即可。

内容的提问来源于stack exchange，提问作者Boppity Bop