美文网首页
Chrome浏览器自动填充的表单如何去掉淡黄色背景

Chrome浏览器自动填充的表单如何去掉淡黄色背景

作者: landry | 来源:发表于2019-11-15 10:44 被阅读0次

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

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

    2、解决方法一:<1>没有背景图片的元素

    input:-webkit-autofill {

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

      -webkit-text-fill-color: #333;

    }

    <2>有背景图片的元素--把背景图片拿出来,独立成为一个标签如<label></label>等。

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

    <!-- 对整个表单设置 -->

    <form autocomplete="off" method=".." action="..">

    <!-- 或对单一元素设置 -->

    <input type="text" name="textboxname" autocomplete="off">

    4、注:除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。

    相关文章

      网友评论

          本文标题:Chrome浏览器自动填充的表单如何去掉淡黄色背景

          本文链接:https://www.haomeiwen.com/subject/cjmjictx.html