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; }

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

  1. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

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

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

  3. 解决chrome记住账号默认样式覆盖

    当谷歌游览器记住账号后,输入框的颜色会变为黄色,最直接的方法:加入以下代码 input:-webkit-autofill , textarea:-webkit-autofill, select:-we ...

  4. 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  5. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

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

    以下内容是分析安卓源码所得: 1: 使用默认样式创建View的方式, 源码文件 Button.Java  注:此文参考http://www.linzenews.com/ 中的内容所写,如侵删! 2: ...

  7. Sass 默认样式库

    Sass 默认初始化样式库 @charset "utf-8"; // 变量存储 // 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8 ...

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

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

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

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

随机推荐

  1. Python学习日志9月17日 一周总结

    周一,9月11日 这天写的是过去一周的周总结,我从中找出当天的内容. 这天早晨给电脑折腾装机,早晨基本上没有学习,休息了一个早晨. 下午写的上周总结,完事做mooc爬虫课的作业,<Think P ...

  2. C++通讯录

    C++通讯录1.0 历时一天,终于把通讯录写好了. 项目要求: 编写一个通讯录管理程序. 有一已存在的通讯录文件,数据内容为各联系人信息. 每个联系人信息的组成部分为: 姓名.电话号码和住址 等个人基 ...

  3. UVA 10735 Euler Circuit (最大流)

    题意:求混合图的欧拉路径. 一句话总结:网络流,最主要在于建图,此题是将出度则是和流量联系在了一起,用最大流来调整边的指向. 分析: 这题的困难之处在于无向边只能用一次,相当于一个方向未定的有向边. ...

  4. POJ1077 八数码 BFS

    BFS 几天的超时... A*算法不会,哪天再看去了. /* 倒搜超时, 改成顺序搜超时 然后把记录路径改成只记录当前点的操作,把上次的位置记录下AC..不完整的人生啊 */ #include < ...

  5. Asp.Net Core 入门(六)—— 路由

    Asp.Net Core MVC的路由在Startup.cs文件中的Configure方法中进行配置,使其加入到Http请求管道中,如果不配置,那么我们所发送的请求无法得到象应. 那么该怎么配置Asp ...

  6. 关于CSS3三角的实现

    1,向上的三角 ;;           ;;           </html> 3,向左的三角 ;;           </html> 4,向右的三角 ;;        ...

  7. go语音实战读后感——一

    1.第一个go程序: package main import ( "fmt" ) func main() { fmt.Println("Hello go") } ...

  8. 洛谷 P2668 斗地主

    毒瘤题目,搞了三天-- 也没什么好讲的,就是纯搜索,先搜顺子,再搜其他的,最后单张牌和对子的时候,就不要搜索了,直接枚举,不然会T飞掉多么痛的领悟-- 主要还是靠码力 #include<iost ...

  9. 【meet in middle】poj1840Eqs

    震惊!map的常数居然如此之大 Description Consider equations having the following form: a1x13+ a2x23+ a3x33+ a4x43 ...

  10. vim中使用pydiction对python代码进行补全

    在配置完vim插件YouCompleteMe之后,在vim编写python的时候按tab键会报错,E121: Undefined variable: g:pydiction_location Pydi ...