input获得焦点时,如何让外边框不变蓝
border 可应用于几乎所有有形的html元素,而outline 是针对链接、表单控件和ImageMap等元素设计。
outline的效果将随元素的 focus 而自动出现,相应的随 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。outline 不会像border那样影响元素的尺寸或者位置。
使用input:focus{outline:none;},可以达到“输入框”获得焦点时边框不变蓝的效果。这个效果也可以使用在button上,button:focus{outline:none;}。
但是在Firefox下,对于类型为button的元素,即使设置outline,也还是会出现虚线。可以使用一个Firefox的私有伪元素:
button:-moz-focus-inner{border:0;},
特别注意的是-moz-focus-inner设置的不是outline,而是设置border。
input获得焦点时,如何让外边框不变蓝的更多相关文章
- 去掉chrome浏览器中input获得焦点时的带颜色边框呢
可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}
- 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- :input获得焦点时被弹出键盘挡住解决办法
这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...
- 【小程序】---- input获得焦点时placeholder重影BUG
问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...
- input获得焦点时改变placeholder文本的样式
HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...
- webapp之登录页面当input获得焦点时,顶部版权文本被顶上去 的解决方法
如上图,顶部版权是用绝对定位写的,被顶上去了,解决方法是判断屏幕大小,改变footer的定位方式: <script> var oHeight = $(document).height(); ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法
1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...
- 如何去除表单元素获得焦点时的外边框:outline (轮廓)
我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...
随机推荐
- Windbg的命令
前面介绍了Windbg的UI功能,也基本上能完成基本的调试任务,但是WinDBG主要是以命令方式工作的,这些命令在Command Window里输入.WinDBG共支持三类命令:标准命令.元命令和扩展 ...
- 使用nginx 正向代理暴露k8s service && pod ip 外部直接访问
有时在我们的实际开发中我们希望直接访问k8s service 暴露的服务,以及pod的ip 解决方法,实际上很多 nodeport ingress port-forword 实际上我们还有一种方法:正 ...
- tldr/cheat
tldr 比man好用的查询命令查询工具, man很强大,但是 TLDR,too long dont read 安装 npm install -g tldr 使用说明 其他版本下载 https://g ...
- Redis-5.0.5集群配置
版本:redis-5.0.5 参考:http://redis.io/topics/cluster-tutorial. 集群部署交互式命令行工具:https://github.com/eyjian/re ...
- MongoDB 高级查询_aggregate聚合管道
MongoDB 聚合管道(AggregationPipeline) 使用聚合管道可以对集合中的文档进行变换和组合.实际项目应用主要是表关联查询.数据的统计. MongoDB 中使用 db.COLLEC ...
- ICEM-四分之一带孔圆板
原视频下载地址:http://yunpan.cn/cLHCeDyzqT2Uh 访问密码 52cf
- 美团-2019Q2述职总结
述职要求: 产品对平台化的规划并不清晰:内部因素:对SaaS平台的理解不够深刻: 对公司相关脚手架,服务搭建相关需要注意的点,有更深入的认识.对做系统服务的关注点有了更深入的理解. 功能权限的话: Q ...
- Vue简单归纳
目录 Vue.JS Vue.JS介绍 概述 MVVM模式 示例图 快速入门 事件绑定 什么是事件 单击事件绑定 键盘事件 按键修饰符 鼠标事件 事件修饰符 数据绑定 插值 v-text v-bind ...
- C# TcpListener TcpClient
C# TcpListener TcpClient 使用,新建从控制台项目,引用System.Net 代码如下: using System; using System.Collections.Gener ...
- Protobuf多协议
上一篇只有Person的message,如果多了一个message,如Dog,这样就会有问题. 解决方法: 定义多协议 一.定义proto文件 syntax = "proto2"; ...