一招解决输入框auto complete时背景颜色问题

简介: 最近在开发中遇到的一个问题,当网站的背景为黑色,用户使用input框中输入内容时,自动填充属性会将内容区域的背景色变为白色,如果要更改背景色,只能寻找替代方案

最近在开发中遇到的一个问题,当网站的背景为黑色,用户使用input框中输入内容时,自动填充属性会将内容区域的背景色变为白色,如果要更改背景色,只能寻找替代方案

解决方式是:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: white !important;
}

我们在这里所做的只是选择伪元素“自动填充”,然后在其内部应用一个巨大的框阴影,因此背景将被框阴影插图覆盖

然后通过属性text-fill-colorwhite

效果如下


@HVNDV8L_])4N{D()4(]`@T.png


@HVNDV8L_])4N{D()4(]`@T.png@HVNDV8L_])4N{D()4(]`@T.png@HVNDV8L_])4N{D()4(]`@T.png

目录
相关文章
|
21天前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
10 0
|
8月前
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
6月前
bootstrap-table选中checkbox改变行的背景颜色
bootstrap-table选中checkbox改变行的背景颜色
46 0
|
6月前
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
47 0
|
6月前
|
前端开发
如何去掉bootstrap按钮边框
如何去掉bootstrap按钮边框
|
8月前
|
前端开发
css只改变input输入框光标颜色不改变文字颜色实现方法
css只改变input输入框光标颜色不改变文字颜色实现方法
|
8月前
|
前端开发
css只改变input输入框光标颜色
css只改变input输入框光标颜色
|
8月前
|
前端开发
css文字选中添加背景色改变字体颜色--三角号demo效果示例(整理)
css文字选中添加背景色改变字体颜色--三角号demo效果示例(整理)
|
9月前
element-plus:el-switch文字显示不全、拥挤
element-plus:el-switch文字显示不全、拥挤
133 0
|
Web App开发 前端开发
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!
127 0