本文介绍: * 2.解决方案二,添加特殊样式覆盖掉原本浏览器默认样式 */表单提交一次,再次输入自动提示然后选择后,会出现样式吗?其实,就一个html代码,加了一个form表单,没事好说的。不太清楚这个单词的含义,一般样式右上角,都会指向我们的。元素背景色为白色,发现居然不生效颜色没有改变。第二部,我错愕了一下,不至于吧,随即怀疑可能使用。第一步,上来我没想太多,直接控制台修改看到这里我才,恍然大悟啊,这不就是浏览器的。,将样式冲突了,开始检查元素属性发现,在。

START

了解需求

思路历程

  1. 一步,上来我没想太多,直接在控制台修改input元素背景色为白色,发现居然不生效,颜色并没有改变。

  2. 二部,我错愕了一下,不至于吧,随即怀疑可能使用!important,将样式冲突了,开始检查input元素的具体属性

  3. 翻找input元素的属性时发现,在 user agent stylesheet 模块下,有一个背景色? 如下图2

图2.png

  1. 不太清楚这个单词的含义,一般样式右上角,都会指向我们css相关文件路径如图三),这个单词以前还真的没有关注到。

    图3.png

    解释一下这个单词 user agent stylesheet

    经过了解

    大白话来说,浏览器默认样式

    看到这里我才,恍然大悟啊,这不就是浏览器的form表单提交一次,再次输入自动提示然后选择后,会出现样式吗?

  2. 知道原因之后,写个demo具体的去玩一玩,了解一下。

demo代码

<!DOCTYPE html>
<html lang="en">
	<head&gt;
		<meta charset="UTF-8" /&gt;
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"
		/>
		<title>
			demo
		</title>

		<style>
			/* 2.解决方案二,添加特殊的样式覆盖掉原本浏览默认的样式 */ 
      /* input:-webkit-autofill { 
        -webkit-box-shadow:0 0 0px 1000px white inset;
        -webkit-text-fill-color: #333; 
      } */
		</style>

	</head>
	<body>
		<!-- 1.解决方案一,关闭掉form表单的自动提示功能 ps(重点属性:autocomplete)-->
		<!-- <form action="http://www.baidu.com" method="get" autocomplete="off"> -->
		<form action="http://www.baidu.com" method="get" autocomplete="on">
			<p>
				First name:
				<input type="text" name="fname" style="background-color:#fff" />
			</p>
			<p>
				Last name:
				<input type="text" name="lname" style="background-color:#fff" />
			</p>
			<input type="submit" value="Submit" />
		</form>
	</body>

</html>

解决方案

代码

其实,就一个html代码,加了一个form表单,没事好说的

解决方案

      input:-webkit-autofill { 
        -webkit-box-shadow:0 0 0px 1000px white inset;
        -webkit-text-fill-color: #333; 
      } 

TIPS

MDN官方文档解释-webkit-autofill

》 CSS css 伪类选择一个元素<吞吐量>当其值由浏览器自动填充时。:-webkit-autofill

兼容性不好,不建议使用

浏览 是否自动填充默认样式 是否生效 备注
谷歌
火狐 否(火狐就没有自动填充背景色默认样式)
Edge 本身就是谷歌内核
safari 没测出来有自动提示

ps: IE就不测试了,一堆问题

总结: 从我自己测试效果上来说,是可以使用的,兼容主流的新版本浏览器。(但官方文档建议废除,不使用

END

原文地址:https://blog.csdn.net/wswq2505655377/article/details/129717711

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_40934.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注