google等webkit浏览器下，设置input输入框自动（选择）填充的字体颜色

最新推荐文章于 2025-02-26 17:21:23 发布

曾燕辉

最新推荐文章于 2025-02-26 17:21:23 发布

阅读量6.2k

点赞数 6

分类专栏： CSS

本文链接：https://blog.csdn.net/yh_zeng2/article/details/53486056

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

场景：让input的字体为白色、背景色为#40a6f5、去除默认的边界、阴影

input:-webkit-autofill,select:-webkit-autofill {  
    -webkit-box-shadow: 0 0 0px 1000px #40a6f5  inset !important;  
} 
#loginForm input#login {
    background-color: transparent;
	margin: 0 auto auto 36px !important;
	padding: 0 !important;
	outline-color: invert !important;
	outline-style: none !important;
	outline-width: 0px !important;
	border: none !important;
	color: white !important;
	border-style: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	-webkit-user-select: text !important;
	outline-color: transparent !important;
	width: 220px;
	color: white;
	box-shadow: none;
}

#loginForm input::-webkit-input-placeholder {
　　color: white !important;    /* WebKit browsers */
}

#loginForm input:-moz-placeholder {
　　color: white !important;   /* Mozilla Firefox 4 to 18 */
}

#loginForm input::-moz-placeholder {
　　color: white !important;   /* Mozilla Firefox 19+ */
}

#loginForm input:-ms-input-placeholder {
　　color: white !important;   /* Internet Explorer 10+ */
}

页面效果如下：

设置了input框的字体颜色为白色，但是手动选择填充（或自动填充）的字体的颜色却是黑色的！！如下图

解决方案：

使用text-fill-color样式属性，添加的内容如下

#loginForm input#login {     
        ...
	text-fill-color: white;
	-webkit-text-fill-color: white; 
}