`

浏览器input输入框修改黄色背景色

    博客分类:
  • html
阅读更多

浏览器表单记录用户名密码自动填充后有黄色背景,


 看了下样式发现是一个样式的原因input:-webkit-autofill

网上查了下有人说添加个属性即可  

 autocomplete="off" 

 

 

有人说添加到from属性里有人说添加到input里,试过都不管用,只能继续找解决方法了,

最后找到的解决方法如下:

对于纯背景色的表单添加以下样式即可

 

input:-webkit-autofill { 
-webkit-box-shadow: 0 0 0px 1000px #2390cc inset; 
} 

 修改后样式如下其实就是设置一个蓝色内阴影覆盖掉黄色背景而已,我对其他样式也做过一些修改:

 

 

网上还找到了拿图片做表单背景的解决方法,不过要在js代码里处理,这个还没有试过,先把代码附上

 

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
 $(window).load(function(){
  $('input:-webkit-autofill').each(function(){
   var text = $(this).val();
   var name = $(this).attr('name');
   $(this).after(this.outerHTML).remove();
   $('input[name=' + name + ']').val(text);
  });
 });
}

 

 

除了背景色还有自动填充的文字颜色也想修改,不过暂时还没找到解决方法,大家谁有好的方法留言哈,多谢了。

下面附张非自动填充的效果图


 

 

 

 

  • 大小: 6.1 KB
  • 大小: 5.9 KB
  • 大小: 6 KB
1
1
分享到:
评论
2 楼 Mr.Joe 2014-06-04  
logoyang88 写道
问题解决了吗,字体颜色怎么修改呢,请教

没有解决啊,后来查了下也没找到解决方法
1 楼 logoyang88 2014-06-04  
问题解决了吗,字体颜色怎么修改呢,请教

相关推荐

    chorme 浏览器记住密码后input黄色背景处理方法(两种)

    使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些...方法2:修改chrome浏览器渲染黄色背景的时间 :-webkit-autofill { -webkit-text-fill-color: #fff !important; transition: background-c

    chrome表单自动填充导致input文本框背景变成偏黄色问题解决

    总之,解决 Chrome 表单自动填充导致的背景色问题通常需要结合 CSS 样式和 JavaScript 技术,具体方法应根据项目需求和浏览器兼容性进行选择。保持对浏览器更新的敏感,并随时调整代码以适应新特性或行为的变化,是...

    动态设置HTML的背景色的资源

    在这个例子中,我们监听了id为`inputField`的输入框的`input`事件,当用户输入的字符数超过10个时,输入框的背景色变为黄色,否则恢复透明。 总结起来,动态设置HTML的背景色主要依靠JavaScript和DOM操作。开发者...

    JS中解决谷歌浏览器记住密码输入框颜色改变功能

    如果开发者希望在用户记住密码之后,输入框仍然保持原来的样式,可以使用CSS的内阴影属性(`-webkit-box-shadow`)来覆盖默认的黄色背景色。例如: ```css input:-webkit-autofill { -webkit-box-shadow:000400px#...

    去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    当Chrome浏览器记录了用户在文本区域输入的内容,并在下次打开时显示,它会覆盖一层淡黄色背景。这种行为是为了提供之前输入内容的视觉提示,但如果你不希望出现这种情况,目前没有直接的CSS解决方案。这涉及到...

    chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

    这个样式会给输入框添加淡黄色背景(`background-color: rgb(250, 255, 189)`)和特定的字体颜色。为了解决这个问题,我们可以使用CSS来覆盖这些默认样式。 一种常见的解决方案是使用`!important`来提升CSS样式的...

    CSS expression判断表达式设置input样式

    当`input`类型为`text`时,背景色设置为`#FFC`(浅黄色),否则背景色不会改变。这是一个简单的例子,展示了如何利用`expression`来实现条件样式: ```css input { background-color:expression(this.type=="text...

    8个html5和css3的高级功能.docx

    } }`,当屏幕宽度小于或等于600px时,背景色变为浅蓝色。 这些HTML5和CSS3的高级功能极大地扩展了网页设计的可能性,不仅提高了用户体验,也减轻了开发者的工作负担。通过合理运用这些功能,可以构建出更加美观、...

    200多个js技巧代码

    通过CSS样式可以轻松地定制按钮的外观,如背景色、边框等属性。示例展示了如何设置按钮的特殊颜色: ```html <input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,...

    web开发常用200个JS代码_Web开发_Java快速开发_.net快速开发

    这里展示了一个带有特殊背景色的按钮,其背景色定义为`rgb(235,207,22)`,这种橙黄色能够吸引用户的注意力。 ### 3. 鼠标移入移出时颜色变化 在按钮上添加鼠标悬停效果,可以使界面更加生动有趣,提高用户体验。 ...

    常用的Javascript技巧大集合

    通过CSS直接设置按钮背景色,例如: ```html <input type="button" name="Submit1" value="按钮" size="10" class="s02" style="background-color: rgb(235, 207, 22);"> ``` #### 2.2 鼠标移过颜色变化 通过 `...

    js 200个技巧

    设置按钮背景色 通过设置按钮的`background-color`属性来改变其背景颜色: ```html <input type="button" name="Submit1" value="按钮" size=10 class="s02" style="background-color: rgb(235, 207, 22);"> ``` ...

    jQuery事件blur()方法的使用实例讲解

    上述代码中,当输入框获得焦点时,背景色变为浅黄色(#FFFFCC),而当输入框失去焦点时,背景色会变为淡紫色(#D6D6FF)。这一变化通过blur()方法和focus()方法分别触发。 此外,为了演示如何手动触发blur事件,...

    全面解析Bootstrap表单使用方法(表单控件状态)

    通过在`form-group`容器上添加相应的类名,可以改变输入框的背景色和边框颜色,以传达不同的反馈信息。例如: ```html 成功状态 <input type="text" class="form-control" id="inputSuccess1" placeholder=...

    应用IE6所不支持的CSS的type选择器

    对于普通的按钮(type="button"),也可以通过CSS来定义其背景色。 尽管type选择器在现代浏览器中被广泛支持,但在IE6以及更早的浏览器版本中,这些选择器并不存在,从而导致同样的CSS代码在IE6中无法正常工作。...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    简单表单input输入框提示插件1.0下载 17.另种效果的jQuery EasyValidator表单验证插件demo示例下载 18.漂亮绿色多级动感仿flash效果的jquery网站导航菜单 19.实用jQuery列表多项选择插件 20.实用jquery实现...

    JQuery为元素添加样式的实现方法

    这将会为所有`span`元素设置文字颜色为红色,文字大小为20像素,并将背景色设置为黄色。 其次,如果CSS样式已经定义在样式表中,JQuery提供了一个`.addClass()`方法来添加一个或多个预定义的CSS类。这适用于那些...

    基于jQuery的弹出隐藏层的窗口特效

    `.message_box`是弹出层的核心,它的宽度为550像素,有5像素宽的红色边框,背景色为浅黄色。由于设置了`position:absolute`,我们可以精确地控制其在页面中的位置,通过`left`和`top`属性将其定位在页面的特定位置。...

    google-serp:克隆 Google 搜索引擎结果页面(HTML 和 CSS 实践)

    例如,`<form>` 标签用于创建搜索表单,`<input>` 代表搜索输入框,`<button>` 作为提交按钮。 2. **CSS 样式**:CSS 是用于美化网页的关键,它负责设置颜色、字体、布局等视觉效果。在克隆 Google SERP 页面时,...

Global site tag (gtag.js) - Google Analytics