css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

时间:2022-03-24 01:16:38

 壹 ❀ 引

本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了。

那么做页面的过程中,UI也是精益求精提了部分小要求,例如希望修改input提示语(placeholder)字号颜色,再如浏览器会记住密码,导致input输入框自带了背景色,希望去除这个颜色。之前也没遇到过,或者说遇到也记不住代码,所以趁此机会记录下。

 贰 ❀ 修改placeholder字号颜色

placeholder字体大小默认继承input字体大小,当然有时候我们希望提示语句与input输入问题字体大小不同,其次,placeholder背景色与字体颜色不会继承input,所以得额外设置,我们可以通过如下代码设置,例如修改前后:

css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

input::-webkit-input-placeholder {
/* 修改字体颜色 */
color: #fff;
/* 修改字号,默认继承input */
font-size: 12px;
/* 设置背景色 */
background: #8ac6d1;
}

css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

叁 ❀ 修改input记住账号密码的背景色

浏览器有时候会自动帮助我们记住账号密码,然后记住之后,input就被动的添加了一个淡蓝色,UI表示看着很不舒服,希望不要有颜色,如下图:

css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

然后查了下,目前有两种解决方案:

1.利用box-shadow为input添加内阴影

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}

京东目前用的就是这种方案,天猫没处理这个。我仔细观察了下,浏览器刚刷新完input是没有颜色的,然后浏览器帮input填充记住的账号密码,变成蓝色,然后样式填充生效,又变成白色,有个颜色抖动的问题,效果不是很理想。

css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

其次,因为阴影填充的缘故,如果背景是透明的就非常明显了,不太美观。

2.利用transition为颜色填充添加一个极长的等待时间

能想到这个方法的也是个人才了,因为浏览器在给input添加账号密码时,input背景色有一个从无到有的过程,所以我们利用transition为这个过程添加一个N久的等待时间,这样浏览器就一直无法填充我们不喜欢的颜色了。

input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}

我们可以尝试将5000s改为3s,效果如下,可以看到3秒内颜色慢慢出现,所以添加一个非常久的时间,让浏览器等到自闭!

css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

目前能通过css解决的手段貌似就看到了这两种,用哪种就因人而异了。

那么就写到这了,人困了...