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

JellyBool

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

表单自动填充是什么

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

图片描述

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

图片描述

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

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

解决方案

其实很简单,我们可以使用 -webkit-autofill 来设置自动填充的样式,就像我们常规使用的 CSS 一样,可以定义它的 borderfont-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 加上 inputtextarea 前缀,比如针对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;
}

同理,可以分别设置 textareaselect 表单。

阅读 5k

给学网
让每一位热爱编程的人都学有所成 - GeiXue.com

给学网 GeiXue.com 创始人:让每一个热爱编程的人都学有所成的精品课程。

16.2k 声望
2k 粉丝
0 条评论

给学网 GeiXue.com 创始人:让每一个热爱编程的人都学有所成的精品课程。

16.2k 声望
2k 粉丝
文章目录
宣传栏