壹 ❀ 引
本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了。
那么做页面的过程中,UI也是精益求精提了部分小要求,例如希望修改input提示语(placeholder)字号颜色,再如浏览器会记住密码,导致input输入框自带了背景色,希望去除这个颜色。之前也没遇到过,或者说遇到也记不住代码,所以趁此机会记录下。
贰 ❀ 修改placeholder字号颜色
placeholder字体大小默认继承input字体大小,当然有时候我们希望提示语句与input输入问题字体大小不同,其次,placeholder背景色与字体颜色不会继承input,所以得额外设置,我们可以通过如下代码设置,例如修改前后:
input::-webkit-input-placeholder {
/* 修改字体颜色 */
color: #fff;
/* 修改字号,默认继承input */
font-size: 12px;
/* 设置背景色 */
background: #8ac6d1;
}
叁 ❀ 修改input记住账号密码的背景色
浏览器有时候会自动帮助我们记住账号密码,然后记住之后,input就被动的添加了一个淡蓝色,UI表示看着很不舒服,希望不要有颜色,如下图:
然后查了下,目前有两种解决方案:
1.利用box-shadow为input添加内阴影
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
京东目前用的就是这种方案,天猫没处理这个。我仔细观察了下,浏览器刚刷新完input是没有颜色的,然后浏览器帮input填充记住的账号密码,变成蓝色,然后样式填充生效,又变成白色,有个颜色抖动的问题,效果不是很理想。
其次,因为阴影填充的缘故,如果背景是透明的就非常明显了,不太美观。
2.利用transition为颜色填充添加一个极长的等待时间
能想到这个方法的也是个人才了,因为浏览器在给input添加账号密码时,input背景色有一个从无到有的过程,所以我们利用transition为这个过程添加一个N久的等待时间,这样浏览器就一直无法填充我们不喜欢的颜色了。
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}
我们可以尝试将5000s改为3s,效果如下,可以看到3秒内颜色慢慢出现,所以添加一个非常久的时间,让浏览器等到自闭!
目前能通过css解决的手段貌似就看到了这两种,用哪种就因人而异了。
那么就写到这了,人困了...