chrome去除蓝色边框和黄色背景色

1、chrome在选中文本框后会出现蓝色边框,如何去掉呢?

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

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

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

这里第一想法是直接覆盖这个background-color,但是貌似不行,可以看到下面我已经覆盖了background-color这个属性,可底色还是黄色的:

百度上找到解决方案:添加相关的样式

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

其实不是屏蔽掉chrome浏览器默认添加的背景样式,而是使用文本框边框阴影遮住了背景颜色而已。样式中的1000px即是阴影的宽度,当然,只要这个宽度大于背景颜色的区域即可。

不过这只适合需要白色底色的情况,若是希望透明色怎么办呢?

强制输入框不能自动搜索:添加属性autocomplete=‘off‘

时间: 2024-08-03 06:40:32

chrome去除蓝色边框和黄色背景色的相关文章

Chrome表单文本框自动填充黄色背景色样式

开发后台管理系统或 网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问 题,把之前查阅的一些资料和自己解决这个问题的方法纪录在此,一是为大家遇到此问题时提供一份资料,二是作为自己的笔记.过多的话就不多说了,下面进入正 题. 一.首先介绍一下我遇到这个问题时文本框的样式情况:  上图为Chrome浏览器为表单中的文本框自动填充黄色背景色的样子, 我自己为文本框加的,获得焦点后,周围有蓝色阴影. <input

chrome的input默认样式黄色背景以及选中加粗的边框处理

问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加autocomplete=‘off’ 去掉粗边框,给input添加outline:none;

android 自定义Dialog去除黑色边框

在自定义Dialog时显示的界面中老是有黑色的边框,下面就介绍使用style去除黑色边框方法. 首先在values/styles定义自定义样式: <style name="MyDialog" parent="@android:Theme.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windo

android 自己定义Dialog去除黑色边框

在自己定义Dialog时显示的界面中老是有黑色的边框,以下就介绍使用style去除黑色边框方法. 首先在values/styles定义自己定义样式: <style name="MyDialog" parent="@android:Theme.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:win

td在relative模式下,IE9不显示border,chrome正常显示边框

百度上怎么也搜不出答案,很奇怪的问题.在IE9的 F12调试中,明明td有1个像素的边框,偏偏不显示. 最后用bing搜索,找到老外的帖子.就立马解决问题. 这让我感觉像是,一般医生折腾也看不好病,好医生总能一语中的.对国外同行由衷佩服. /*这样不显示边框*/ .thisTd {     position:relative; } /*第一个老外说这样,立马有边框*/ .thisTd {   z-index=-1;     position:relative; } 但这样,td是显示在table

WPF 窗口去除顶部边框(正宗无边框)

原文:WPF 窗口去除顶部边框(正宗无边框) 最近在做一个大屏展示视频图片的项目,功能并不复杂,半天的工作量吧,一开始同事采用的Unity3D进行开发,但是里面要播放4K视频,Unity 的短板就是视频的播放了,今晚就要交付了,我一早就来公司,决定用WPF重新开发一版,各项功能都好了,唯独顶部总是显示一条白色的边,已经设置WindowStyle为None了也没用,幸得网上大神提供的资料,终于解决了这个小问题. XAML内容如下: <Window x:Class="WPF_VideoPlay

去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>去除input的边框</title> 6 <style> 7 input{text-indent: 1em;} 8 #search1{ } 9 #search2{ border-width: 0; } 10 #search3{ border:1px solid re

idea关于mybatis去除黄色背景色与绿色背景

原文地址:https://www.cnblogs.com/qiudaozhang/p/9618378.html

除a、button、input点击后出现的蓝色边框

在微网站上面如何去除a.button.input点击后出现的蓝色覆盖层或者边框 0 [待解决问题] 浏览: 2959次 a,button,input{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-modify: read-write-plaintext-only;} 我在网上找资料找到这个样式,手机上别的浏览器都ok了 但是微信不行,如何解决