chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复:

/* Change the white to any color ;)
就是给input设置内置阴影!而且一定要大,至少要比你的input本身大,不过,box-shadow是很慢的,
而且,如果你的input是用图片做背景的话,是没有办法做这么干的*/
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px white inset;
}
/* Additionally, you can use this to change the text color: */
-webkit-text-fill-color: yellow !important;

或者

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}

或者直接关闭chrome的自动完成

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

<form autocomplete="off"></form>

参考:https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
           https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

关闭chrome浏览器的input香蕉黄背景的更多相关文章

  1. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  2. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  3. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  4. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  5. 去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框的方法

    此文来源网络,我转载的原文里的图显示“该图片仅限百度用户内部交流使用”,我估计这篇文章是从百度空间抄过来的,该作者没保留原文地址.所以我在这里也没保留抄袭文章的地址. chrome浏览器不管对于开发者 ...

  6. [转]关闭 Chrome 浏览器的启动时提示 - 请停用以开发者模式运行的扩展程序

    最新版本 69.0.3497.92 (x64) 解决办法: https://www.cnblogs.com/liuxianan/p/disable-chrome-extension-warning.h ...

  7. 关闭Chrome浏览器的广告

    生活没有绝对的对与错:代码就不一样了,错了就编译不过,也正是因为这样,编程的人思维有时也会陷入一种狭隘中,这就是把工作和生活没有分开.Win10 右下角的广告就像程序调试中的"警告" ...

  8. 关闭chrome浏览器的developer tools

    背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shift+C等都会启动developer tools.对于不开发Web的人来说, ...

  9. 苹果手机Chrome浏览器显示input:disabled时字体颜色总是为浅灰色

    今天被测试人员提了个bug:苹果手机浏览器(Chrome)打开h5,控件在input:disabled的样式始终是浅灰色,要求改成黑色.测试对比:1.在多个pc浏览器上浏览input:disabled ...

随机推荐

  1. codeforce Gym 100500A Poetry Challenge(博弈,暴搜)

    题解:状态压缩之后,暴力dfs,如果有一个选择,能让对手必败,那么就是必胜态,能转移到的状态都是对手的必胜态,或者无法转移,就是必败态. 总算是过了,TLE是因为状态没判重. #include< ...

  2. 方法的重写【java语言】

    1.父类 package com.wyq.study; public class Father{//书写类 //书写属性 private String name; private int age; / ...

  3. 2018.2.25 关于JavaScript

    关于JavaScript 1.数组的归约函数reduce(function(PREV,CUR,I){})会从做导游进行迭代,每次返回的值为下一次的prev参数. 2.在循环遍历数组时若是想在找到结果后 ...

  4. async/await的使用以及注意事项

    使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项. a ...

  5. Sublime +Markdown+OmniMarkupPreviewer 搭建实时预览的markdown编辑器

    浏览器实时预览 <meta http-equiv="refresh" content="0.1"> auto save 的配置 {"aut ...

  6. iOS 后台传输服务

    后台传输服务 — 我们用水壶来比喻 (0:14) 后天传输服务是 iOS 7 引进的 API,它准许应用暂停或者中止之后,在后台继续执行网络服务(比如下载或者上传).举个例子,这正是 Dropbox ...

  7. paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之onehot coding styles(index-parameter style with registered outputs)

    case语句中,对于state/next 矢量仅仅做了1-bit比较. parameter 值不是表示FSM的状态编码,而是表示state/next变量的索引.

  8. 收集的免费API接口

    1.IP地址调用接口 这是淘宝的IP调用API http://ip.taobao.com/service/getIpInfo.php?ip=$ip 返回值:{"code":0,&q ...

  9. leetcode-24-exercise

    506. Relative Ranks 解题思路: 使用priority_queue.它在插入时会将数据按照由大到小的顺序插入,自然排序了.所以插入时考虑插入pair<nums[i],i> ...

  10. 深入理解FIFO(包含有FIFO深度的解释)——转载

    深入理解FIFO(包含有FIFO深度的解释) FIFO: 一.先入先出队列(First Input First Output,FIFO)这是一种传统的按序执行方法,先进入的指令先完成并引退,跟着才执行 ...