Chrome中输入框默认样式移除

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; }
时间: 2024-10-08 09:00:17

Chrome中输入框默认样式移除的相关文章

chrome中文本框样式问题

在用bootstrap开发一个登录表单时,在chrome浏览器测试发现以下问题. 1 在text输入框中重复输入相同内容时会有提示 单击提示框内容后文本框会出现黄色背景. 调试发现,chrome浏览器会自动给文本框添加如下样式 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: non

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

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

input button和text在不同浏览器中的默认样式

button的width和height和标准的盒模型不一致,是指的包含边框在内的宽度和长度 测试代码: <!DOCTYPE html> <html> <body> <input id="box" type="text"></input> <input type="button" value="按钮"></input> </body>

Android使用默认样式创建View的几个姿势

以下内容是分析安卓源码所得: 1: 使用默认样式创建View的方式, 源码文件 Button.Java  注:此文参考http://www.linzenews.com/ 中的内容所写,如侵删! 2: 需要声明默认样式的属性, 源码文件 attrs.xml  3:创建默认样式, 源码文件 styles.xml  4:在APP主题中,引用默认样式 themes.xml (注意这步不能忘记)  源码分析结束. 以下是我个人的使用经验: 1:主题中引用 radioButton样式  2:声明默认样式属性

Sass 默认样式库

Sass 默认初始化样式库 @charset "utf-8"; // 变量存储 // 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53 $pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial; $defaultColor: #333; $mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-

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

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

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,

Chrome 默认样式 (user agent stylesheetbody) 优先级变高的问题

解决方法:只需要在页面的<HTML>标签前添加声明即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 或者 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN

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

最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式. 看代码: 取消chrome下input和textarea的聚焦边框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大: textarea{resize:none} 最