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. C#中Json进行序列化时去掉值为null的节点

    当我们用json文件为数据源时,并对json数据进行操作时可能会产生一些数值为null的节点生成,想要去掉null的节点需要一些操作 本文用一个简单的工具对json进行操作 工具:Newtonsoft ...

  2. java程序-类的高级特性

    创建Employee类,在类中定义三个属性:编号,姓名,年龄,然后在构造方法里初始化这三个属性,最后在实现接口中的定义的CompareTo方法,将对象按编号升序排列. 代码如下:(程序可能有些错误,方 ...

  3. BOM函数之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  4. 什么是二维数组?二维遍历?Java二维数组制作图片迷宫 使用如鹏游戏引擎制作窗口界面 附带压缩包下载,解压后双击start.bat启动

    什么是二维数组? 数组当中放的还是数组 int [][] arr=new int[3][2]; 有3个小箱子,每个箱子2个格子. 看结果? int [][] arr=new int[3][2]; Sy ...

  5. React中 checkbox 与 label 标签的搭配

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...

  6. (51)zabbix命令:zabbix_get获取item数据

    zabbix_get是什么?有什么作用? 总有人在群里提问,为什么zabbix获取不到数据,为什么zabbix提示Not Support,怎么办?别老问,用zabbix_get试着获取数据即可.在za ...

  7. mysql 审核引擎 goInception 的基本使用

    官网地址 github.com 安装 git clone https://github.com/hanchuanchuan/goInception.git cd goInception 修改配置 开启 ...

  8. Python9-递归函数-day17

    # 计算方法:人脑复杂,计算机简单#查找:找数据#排序#最短路径#我们学习的算法都是过去时#要了解基础的算法,才能创造出更好的算法#不是所有的事情都能套用现成的方法解决的# 有些时候会用到学过的算法只 ...

  9. 基于IAR移植sdk12.2.0建立nrf52832的工程———GPIO

    工程伊始,需要在sdk包中拷贝三个重要的文件,blinky_iar_nRF5x.icf,iar_startup_nrf52.s,system_nrf52.c. 工程目录建立: 1.建立bsp文件,包括 ...

  10. Java集合之PriorityQueue

    PriorityQueue 定义 C++:priority_queue Java:PriorityQueue 创建与其基本操作 创建: PriorityQueue<Integer>=new ...