1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 设置 文本框 自动填充背景颜色 为白色

设置 文本框 自动填充背景颜色 为白色

时间:2021-04-28 10:52:57

相关推荐

设置 文本框 自动填充背景颜色 为白色

关于autofill伪类的 兼容性:

在现代浏览器中,包括Chrome、Safari、Firefox等,都支持:autofill伪类,但在使用时必须加上浏览器前缀-webkit-,即:-webkit-autofill

在旧版的浏览器中,可能不支持:autofill伪类,需要使用其他的hack方法来实现。同时,不同浏览器也可能对:-webkit-autofill的支持程度不同,需要根据实际情况来选择合适的hack方法。

经测试,貌似不用-webkit-autofill也可以。某些情境下可能需要使用:-webkit-autofill伪类。具体情况,具体分析。【以下 方法中的 属性值 最好都加 "! important",以绝后患!】

方法一:box-shadow

input:-webkit-autofill {color: transparent;background-clip: content-box;background-color: white;caret-color: black;/*光标设置为 黑色*//*上面根据具体情境 可选,box-shadow最重要!!*/-webkit-box-shadow: 0 0 0 1000px white inset !important;box-shadow: 0 0 0 1000px white inset !important;}

浏览器的 自动填充机制 在渲染页面 之后才会生效,会覆盖设置的CSS样式。为了解决这个问题,你可以使用transition属性来延迟样式的生效时间。。。。

方法二:-webkit-text-fill-color 和transition: background-color 5000s ease-in-out 0s;

input {/*必须为background-color属性(即便这里没有设置background-color)、或all 加上 过渡效果,不然不会生效!!*/-webkit-text-fill-color: #333333 !important;transition: background-color 5000s ease-in-out 0s;}

方法三:background-color和transition: background-color 5000s ease-in-out 0s;

input {/*必须为background-color属性、或all 加上 过渡效果,不然不会生效!!*/background-color: white !important;transition: background-color 5000s ease-in-out 0s;}

啰嗦一下:

/* 三合一,遇到问题再调整 */input:-webkit-autofill {box-shadow: 0 0 0 30px white inset !important;-webkit-text-fill-color: #333333 !important;background-color: white !important;transition: background-color 5000s ease-in-out 0s;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。