Chrome中输入框默认样式移除

　　在chrome浏览器中会默认给页面上的输入框如input、textarea等渲染浏览器自带的边框效果

　　IE8中效果如下：

　　Chrome中效果如下：

这在我们未给输入框设置获取焦点时改变边框颜色时，chrome浏览器解析页面中默认将输入框获取焦点时改变边框效果，这给我们带来了极大的方便。如果我们要自己设置边框色时，chrome浏览器的默认操作就给我们的设置（boder:1px solid color）带来了问题，这是你会发现，你的设置在其他浏览器中时有效的，但在chrome中却是无效的。

为解决这问题我们只需加上如下css，便可解决问题：

*:focus { outline: none; }

　　若想给某个输入框增加样式，也可这样操作：

#inputBT:focus { outline: 1px solid #ed6f19; }

　　效果入下：

这样设置时会发现，在橘色边框旁还有一个细细的边框色，将css样式改为，即可完美解决：

#inputBT:focus { border: 1px solid #ed6f19; }

转载于:https://www.cnblogs.com/ylhssn/p/4353202.html

Chrome中输入框默认样式移除相关推荐

html怎么设置img样式,css默认样式 css中img默认样式问题
css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...
如何更改MindMapper中的默认样式
在MindMapper选项中,我们可以通过更改一些设置来定义我们的默认样式,更加贴合我我们平常绘制导图的需要.本文解析了MindMapper选项中的默认样式,教你怎样通过设置来更改导图的默认样式. 打 ...
MindMapper中的默认样式怎样进行修改
在MindMapper选项中,我们可以通过更改一些设置来定义我们的默认样式,更加贴合我我们平常绘制导图的需要.本文解析了MindMapper选项中的默认样式,教你怎样通过设置来更改导图的默认样式. ...
如何使用 CSS 中的重置（reset）属性来重置元素在网页中的默认样式
嗨,大家好!今天,我要和你们聊聊CSS中的"重置"属性,也就是让我们一起来重置一下网页中元素的默认样式吧! 首先,让我们来看看一些常见的元素有什么特点,也就是需要"重置& ...
ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果于是我就去 ant design vue 里面找,发现 description 组件符合这个效果但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
阻止button默认点击边框_如何消除button/button标签的默认样式
在不添加任何样式的情况下,以下的html代码呈现如下: 1 2 3 4 5 6 7 8 9 上面是在谷歌浏览器中的默认样式.可以发现默认带有padding和border. 我们可以添加以下代码来消除默 ...
php输入文本框样式,【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 : 题目要求: 编写一个用户注册页面检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 : 代码如下 : 用户注册页面 .bg {back ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
2 HTML中的body和它的默认样式
大家好,我是小遁. body有默认的margin值在上节课的代码中加入<div>Hello World</div> <!DOCTYPE html> <htm ...

Chrome中输入框默认样式移除

Chrome中输入框默认样式移除

Chrome中输入框默认样式移除相关推荐

最新文章

热门文章