网站建设与维护结课论文,个人nas做网站,建搜索型网站,盖州网站建设关于autofill伪类的 兼容性#xff1a;
在现代浏览器中#xff0c;包括Chrome、Safari、Firefox等#xff0c;都支持:autofill伪类#xff0c;但在使用时必须加上浏览器前缀-webkit-#xff0c;即:-webkit-autofill。
在旧版的浏览器中#xff0c;可能不支持:autofill伪…关于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;
}
