自定义表单自动填充的样式

原文：https://www.codecasts.com/blo...

表单自动填充是什么

本文谈论的表单自动填充是指：浏览器在网页中识别到一个表单的字段时，提供一个允许用户自动填充的功能，如下图

上图的 GIF 显示的过程就是自动填充。而我们需要自定义的样式就是图中黄色的部分

注意到上图的邮件的表单字段了么？自动填充之后，它就有了一个黄色的背景，这在很多情况下会与我们原来的网页配色格格不入。

所以，我们来自定义一下这个自动填充的样式。

解决方案

其实很简单，我们可以使用 -webkit-autofill 来设置自动填充的样式，就像我们常规使用的 CSS 一样，可以定义它的 border 和 font-size 等，至于背景色，我们可以使用 -webkit-box-shadow 来指定，字体的颜色使用 -webkit-text-fill-color 设置，所以，最后的 CSS 代码大概是这样：

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
    borrder: none;
    -webkit-text-fill-color: #000; // 自定义字体的颜色
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;// 背景色
    transition: background-color 5000s ease-in-out 0s;
    font-weight: 500;
}

通俗的解决方案可以类似上面这样，这个代码可以直接放到你的 CSS 文件中。效果如下图，注意我们没有了黄色的背景：

如果说你还想针对不同的表单类型(input,textarea,select等)进行不同的自动填充样式的修改，可以在 -webkit-autofill 加上 input，textarea 前缀，比如针对input 的设置可以是这样：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
     border: none;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
    font-weight: 500;
}

同理，可以分别设置 textarea 和 select 表单。