css小技巧-浏览器自动填充的输入框背景色

在浏览器中选择浏览器记住的内容,会使输入框背景变色
查询得知浏览器会加入了-webkit-autofill 的伪类
但是直接在-webkit-autofill 中修改背景颜色无效
这是因为在浏览器还加入一个无法修改的伪类 -internal-autofill-selected
所以正确的做法是:通过box-shadow改变背景色

  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px ${color.bg} inset;
    -webkit-text-fill-color: ${color.text};
    caret-color: ${color.text};
  }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。