chrome浏览器去除蓝色边框和黄色背景色

文本框出现这两种情况真是很糟心

1、在使用chrome浏览器时,选中文本框后会出现蓝色边框，导致页面很不好看如何去掉呢？

直接给文本框添加这个样式属性就可以解决问题了：outline:none;

2、chrome浏览器会自动记录搜过的关键字，在你下次点击文本框准备输入的时候会以下拉框的形式列出搜索过的关键词，当你点选列表中的关键词后，选中的关键词会自动填充到文本框中，但是此时，文本框的背景却发生了变化，变成了偏黄色，那么如何去掉呢？(所以最好不要让Chrome浏览器记住密码)

这是由于chrome浏览器默认的给自动填充的文本框添加了背景样式属性，chrome浏览器中查看元素里可以看到：

解决方法: (使用文本框边框阴影遮住了背景颜色 ---1000px即是阴影的宽度,只要这个宽度大于背景颜色的区域即可)

/* input:-webkit-autofill {
z-index: 100;
-webkit-box-shadow: 0 0 0px 1000px white inset;
} */

如果你引入了非常漂亮的背景图案,为何不尝试让其颜色为透明色,岂不更加完美!

只要强制输入框不能自动搜索：添加属性autocomplete='off'即可

chrome浏览器去除蓝色边框和黄色背景色相关推荐

chrome去除蓝色边框和黄色背景色
1.chrome在选中文本框后会出现蓝色边框,如何去掉呢? 给文本框添加这个样式属性就可以解决问题了:outline:none; 2.chrome浏览器会自动记录搜过的关键字,在你下次点击文本框准备输 ...
Google chrome 浏览器去除地址栏搜索历史纪录
Google chrome 浏览器(V:84.0.4147.135)去除地址栏搜索历史纪录打开 chrome://flags/ 搜索 "Omnibox Zero Suggestions o ...
chrome html代码提示框,如何去掉chrome浏览器自动完成输入框背景黄色
chrome浏览器或其它webkit内核浏览器自动完成输入框的输入后,输入框会有淡黄色背景.就像这样: 我们一般不想要这个样式. 如果只是想去掉这个黄色背景,我们可以用足够大的内阴影来遮盖这个黄色背景 ...
input去除蓝色边框
input标签在使用的时候会有边框样式.当input聚焦的时候又会显示出一个蓝色边框. 很多时候我们并不需要这种默认样式的边框,就需要去除边框. 给需要去除的标签添加css样式: border: no ...
解决谷歌浏览器和360浏览器 input 自动填充淡黄色背景色的问题
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;} 转载于:https://www.cnblogs.com ...
取消Chrome表单文本框自动填充黄色背景色样式
开发后台管理系统或网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问题,把之前查阅的一些资料和自己解决这个问 ...
去掉chrome浏览器中input被自动填充后的背景色
chrome浏览器中,输入框如果被自动填充内容了,那么输入框也会被浏览器自动填充一个背景色,我电脑上填充的是蓝色,在网上有查到有填充黄色的,但不管是什么颜色的,实际表现是chrome给我们自动填充的i ...
去除input框点击后的一圈样式_去除input边框 input去除边框去除input获取焦点时的蓝色外边框...
去除input的边框 input{text-indent: 1em;} #search1{ } #search2{ border-width: 0; } #search3{ border:1px so ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...

chrome浏览器去除蓝色边框和黄色背景色

chrome浏览器去除蓝色边框和黄色背景色相关推荐

最新文章

热门文章