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

原文：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 表单。