Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能？

1、原因：表单自动填充元素在chrome下会有一个默认样式 （如下），并且优先级最高，无法覆盖（!important也无法覆盖）。

input:-webkit-autofill {

    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

2、解决方法一：[1]input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px white inset;

border: 1px solid #CCC!important;

}

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;

}

[2]input文本框是使用图片背景的

把背景图片拿出来，独立成为一个标签如<label></label>等。

3、解决方法二：关闭浏览器自带填充表单功能

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能？相关推荐

解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
Chrome浏览器自动填充的表单如何去掉淡黄色背景？？？
1.原因:表单自动填充元素在chrome下会有一个默认样式 (如下),并且优先级最高,无法覆盖(!important也无法覆盖). input:-webkit-autofill { backgroun ...
去掉IDEA中xml文件的淡黄色背景
在编写mybatis的xml文件时,会出现大面积的淡黄色背景(如下图所示),看起来很不舒服,现在说明去掉淡黄色背景的步骤. 第一步: 变成了下面的背景第二步: 快捷键 ctrl + shift + ...
vue iview表单验证,清除表单验证/去掉表单验证的*号
前言: 最近写isop项目遇到的问题, 表单验证,默认的iview写法加上prop,在data里面定义,input前面就会有个红色的号,表示这里必填加了验证,测试觉得这个号碍眼,让我去掉,第一次遇到这 ...
去除表单元素的默认样式
一.使用 appearance 改变 webkit 浏览器的默认外观 webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观,该属性非常 ...
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
From表单如何获取默认值
我们给这两个select下拉框设置默认值,代码如下: <Form.Itemname="name"label="所属公司"rules={[{ require ...
表单form数据默认以键值对的形式将数据回发到服务器，回发非纯文本需使用enctype=multipart/form-data方式编码为整条消息...
表单使用encrype=application/x-www-form-urlencoded时,各控件数据会以键值对的形式发到服务器,如果表单数据不是文本,这种编码就不能满足需要. 使用enctype= ...
提交表单自动刷新_Web自动化测试：元素的基础操作和浏览器基础操作
上一节,我们了解了如何定位元素,其实也有涉及对于元素的操作,这一节我们就详细的介绍一下对于元素的操作和对于浏览器的一些操作一.对于元素的基础操作: clear():清除输入框内的文本 send_ke ...

Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能？

Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能？相关推荐

最新文章

热门文章