input去除自动填充后样式

最新推荐文章于 2024-06-26 11:30:59 发布

原创最新推荐文章于 2024-06-26 11:30:59 发布 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #css #js #前端

web前端同时被 2 个专栏收录

33 篇文章

订阅专栏

Vue

24 篇文章

订阅专栏

本文介绍如何解决登录页面input自动填充后的视觉问题，包括关闭自动填充、使用CSS动画延迟等方法，并提供Shadow-dom原理的参考。适合前端开发者处理美观与兼容性问题。

input去除自动填充后样式

常见于登录页面，浏览器设置了记住密码后，input会自动填充内容，造成填充内容后的input会变色，色值不定，反正就是不好看。

在这里插入图片描述

原因

input自动填充的样式是用Shadow-dom的方式实现的，游离于DOM 树之外的节点树，不好通过css直接修改。要开启谷歌浏览器的Show user agent shadow DOM设置才能看到对应的css。

在这里插入图片描述

解决方法

1、关闭自动填充表单功能

此方式对直接用form和input写的页面有效，对一些封装的第三方UI不大友好，例如elementUI。会不生效。

<form autocomplete="off">
<input type="text" autocomplete="off">

2、设置input样式动画

此方式最直接有效，全局设置，延长自动填充背景色动画的时间，对原生或封装的UI都很友好，推荐使用。

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

参考

Shadow-dom相关可参考此文，很详细 shadow dom的作用和用法详解(createShadowRoot, attachShadow)