html 编辑框取消默认样式,Chrome中输入框默认样式移除

Chrome中输入框默认样式移除

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

IE8中效果如下:

89133f6403bb8e8139a6889b0197a000.png

Chrome中效果如下:

1d816ffa9db82ecc78ea5c705a6c7065.png

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

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

*:focus { outline: none; }

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

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

效果入下:

8eb9b4efe30685c6ef3913579414d835.png

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

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

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"在各个浏览器下的默认样式,以及修改自定义样式

一.在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 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 ...

随机推荐

PHP实现全排列(递归算法)

算法描述:如果用P表示n个元素的全排列,而Pi表示n个元素中不包含元素i的全排列,(i)Pi表示在排列Pi前面加上前缀i的排列,那么n个元素的全排列可递归定义为:    ① 如果n=1,则排列P只有一 ...

第一篇 Entity Framework Plus 之 Audit

一般系统会有登陆日志,操作日志,异常日志,已经满足大部分的需求了.但是有时候,还是需要Audit 审计日志,审计日志,主要针对数据增,改,删操作数据变化的记录,主要是对数据变化的一个追踪过程.其中主要 ...

VS里统计整个解决方案代码行数的方法

VS里统计整个解决方案代码行数,在查找里输入正则表达式:b*[^:b#/]+.*$.如下图所示: 结果如下图所示:

Linux中记录终端(Terminal)输出到文本文件(转载)

一,如何把命令运行的结果保存到文件当中? 这个问题太简单了,大家都知道,用 > 把输出转向就可以了 例子: [lhd@hongdi ~]$ ls > ls.txt [lhd@hongdi ...

一个简单的ObjC和JavaScript交互工具

https://github.com/changjianfeishui/XBWebBridge ObjectiveC与Js交互是常见的需求,可对于新手或者所谓的高手而言,其实并不是那么简单明了.这里只 ...

jquery属性选择器中|value和^value的区别

jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...

oracle 11g在安装过程中出现监听程序未启动或数据库服务未注册到该监听程序

15511477451 原文 oracle 11g在安装过程中出现监听程序未启动或数据库服务未注册到该监听程序? 环境:win7 64位系统.oracle11g数据库 问题描述:在win7 64位系统 ...

什么XSS攻击?PHP防止XSS攻击函数

什么XSS攻击?PHP防止XSS攻击函数 发布时间: 2013-05-14 浏览次数:22325 分类: PHP教程 XSS 全称为 Cross Site Scripting,用户在表单中有意或无意输 ...

mysql数据库索引类型和原理

索引初识: 最普通的情况,是为出现在where子句的字段建一个索引.为方便讲述,我们先建立一个如下的表. CREATE TABLE mytable ( id serial primary key, c ...

coding规约的网站, 从sonar中链接过去

一个coding规约的网站, 从sonar中链接过去的. 挺好. https://wiki.sei.cmu.edu/confluence/display/seccode/SEI+CERT+Coding ...

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值