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

最新推荐文章于 2023-04-18 09:08:06 发布

转载最新推荐文章于 2023-04-18 09:08:06 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000009925467

本文介绍如何使用-webkit-autofill属性来自定义浏览器表单自动填充后的样式，包括背景颜色、字体颜色及边框等，使自动填充的表单元素更加符合网站的设计风格。

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