logo

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


风晓
风晓 2024-01-03 00:35:32 20977 赞同 0 反对 0
分类: 资源
css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

 

 壹 ❀ 引

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

那么做页面的过程中,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解决的手段貌似就看到了这两种,用哪种就因人而异了。

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等,可点击“私信”按钮向作者进行反馈;如作者无回复可进行平台仲裁,我们会在第一时间进行处理!

评价 0 条
风晓
粉丝 1 资源 2038 + 关注 私信
最近热门资源
工业防火墙为啥不走寻常路?  637
窃密软件无孔不入?迪普科技防护策略为隐私数据筑牢防线  279
最近下载排行榜
工业防火墙为啥不走寻常路? 0
窃密软件无孔不入?迪普科技防护策略为隐私数据筑牢防线 0
作者收入月榜
1

prtyaa 收益363.15元

2

风晓 收益207.84元

3

IT-feng 收益198.17元

4

zlj141319 收益178.22元

5

777 收益172.06元

6

1843880570 收益171.31元

7

信创来了 收益103.8元

8

Fhawking 收益99.6元

9

克里斯蒂亚诺诺 收益91.08元

10

技术-小陈 收益79.05元

请使用微信扫码