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

tianyu 发布于2019-08-29 12:50 / 815人阅读

摘要：而我们需要自定义的样式就是图中黄色的部分注意到上图的邮件的表单字段了么自动填充之后，它就有了一个黄色的背景，这在很多情况下会与我们原来的网页配色格格不入。所以，我们来自定义一下这个自动填充的样式。

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

云服务器 GPU云服务器自定义按钮样式表单自定义自定义表单自定义表单工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112176.html

常用H5

摘要：笔记了解属于上一代的新迭代语言，设计最主要的目的是为了在移动设备上支持多媒体例如标签和及标记新特性取消了过时的显示效果标记和新表单元素引入新语义标签的引入标签图形设计本地数据库本地存储一些好处跨平台HTML5笔记了解HTML5 ☞HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！例如： video 标签和 audio 及 canv...

dabai 2019-04-23 11:50 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

MangoGoing 2019-08-29 15:30 评论0 收藏0