[分享]css关掉表单自动填充

为了方便用户填写表单，现在的浏览器都默认开启了表单自动填充功能。但是有时我们却希望关闭这个功能，比如在用户登录界面，为了安全性，我们不希望浏览器自动填写用户的账号和密码。那么该怎么做呢？下面介绍如何通...

为了方便用户填写表单，现在的浏览器都默认开启了表单自动填充功能。但是有时我们却希望关闭这个功能，比如在用户登录界面，为了安全性，我们不希望浏览器自动填写用户的账号和密码。那么该怎么做呢？下面介绍如何通过CSS来关闭表单自动填充。

 /* 关闭表单自动填充 */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #333 !important;
    } 

上面的CSS代码中，使用了CSS的伪类选择器来选择表单元素，并使用了WebKit前缀来兼容更多的浏览器。在每个选择器中，都有一个“-webkit-autofill”的伪类选择器，这是用来关闭自动填充的关键。通过设置一个白色的内部阴影，并将文本颜色恢复到黑色，就可以达到关闭表单自动填充的目的了。

当我们需要在某个表单中关闭自动填充时，只需要将这段CSS代码插入到相应的样式表中即可。需要注意的是，CSS无法在所有浏览器上完美实现，所以在实际应用中还需要进行兼容性测试。