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; }
Chrome中输入框默认样式移除的更多相关文章
- css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
- chrome的input默认样式黄色背景以及选中加粗的边框处理
问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加au ...
- 解决chrome记住账号默认样式覆盖
当谷歌游览器记住账号后,输入框的颜色会变为黄色,最直接的方法:加入以下代码 input:-webkit-autofill , textarea:-webkit-autofill, select:-we ...
- 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标
btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
- Android使用默认样式创建View的几个姿势
以下内容是分析安卓源码所得: 1: 使用默认样式创建View的方式, 源码文件 Button.Java 注:此文参考http://www.linzenews.com/ 中的内容所写,如侵删! 2: ...
- Sass 默认样式库
Sass 默认初始化样式库 @charset "utf-8"; // 变量存储 // 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8 ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- 取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...
随机推荐
- ping 不通。无法访问目标主机
台式机 使用无线网卡 又登录了VPN 有时候访问不了局域网内的主机 解决方案 添加路由即可 window+R 打开运行 输入cmd 然后输入 route add 10.16.1.89 10.13 ...
- AEE加密解密
from Crypto.Cipher import AESfrom binascii import b2a_hex, a2b_hex class AesHandler(object): def ...
- PAT (Advanced Level) Practise - 1096. Consecutive Factors (20)
http://www.patest.cn/contests/pat-a-practise/1096 Among all the factors of a positive integer N, the ...
- React框架搭建单页面应用package.json基本包和依赖包
{ //依赖包 "devDependencies": { //babel "babel-core": "6.24.1", "bab ...
- 【分块】[HNOI2010]弹飞绵羊&分块大法祭
分块(似乎还有一种动态树(LCT)做法) 第一次学习分块,似乎有点小激动 这是黄学长的分块入门博客「分块」数列分块入门1 – 9 by hzwer 题目描述 某天,Lostmonkey发明了一种超级弹 ...
- MySQL丨01丨数据库基本概念
以前记录数据可能很少也很简单,比如说老王借了老李半斤肉,这样的数据老李直接就写到墙上就行了. 后来数据多了人们就以表格的方式开始记录,写到一张A4纸上,比如学生的档案,有表头和序号等. 表头里有姓名. ...
- MySql存储过程的调试
写和调试存储过程比较好的工具是dbForge studio for mysql 校验其中临时表字段是否符合要求,在存储过程中动态为临时表添加字段约束,或者写个游标,把数据迭代出来,一个个判断.当游标迭 ...
- H5移动端触摸事件:touchstart、touchend、touchmove
第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...
- TB平台搭建之三
有简单到复杂,可以简单的决不复杂化,事情从可控开始,即使再好的技术如果不可控最好不要用否则以后的debug可能比较麻烦. 无论是搭建平台还是写复杂的case都是尽量从简单开始,不要上来复杂,否则deb ...
- 【php】 php能做什么
来源:php官方文档 网站和 web 应用程序(服务器端脚本) 命令行脚本 桌面(GUI)应用程序 相信大多数人都不知道第三种,用php竟然可以写GUI,当然是基于PHP-GTK扩展写的