input输入框重写背景样式不生效,竟然是因为它?

186 阅读1分钟

1721090303341.png

问题:重写element-plus输入框的背景色不生效,账号密码相关的输入框自带个
input:-internal-autofill-selected 的样式
light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4))

环境:

  1. chorme 123.0.6312.123
  2. element-plus 2.7.6

错误原因:
谷歌浏览器针对输入框保存记录之类的内容,有一个自带背景色,重写却覆盖不掉

1721090845663.png

解决方案:
使谷歌浏览器自带的样式进行延迟生效

input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-transition-delay: 111111s;
        -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
    } 

一切正常!

1721090774958.png