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获得焦点时,如何让外边框不变蓝的更多相关文章

  1. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  2. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. :input获得焦点时被弹出键盘挡住解决办法

    这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...

  4. 【小程序】---- input获得焦点时placeholder重影BUG

    问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...

  5. input获得焦点时改变placeholder文本的样式

    HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...

  6. webapp之登录页面当input获得焦点时,顶部版权文本被顶上去 的解决方法

    如上图,顶部版权是用绝对定位写的,被顶上去了,解决方法是判断屏幕大小,改变footer的定位方式: <script> var oHeight = $(document).height(); ...

  7. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  8. 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...

  9. 如何去除表单元素获得焦点时的外边框:outline (轮廓)

    我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...

随机推荐

  1. 【loj3059】【hnoi2019】序列

    题目 给出一个长度为 \(n\) 的序列 \(A\) ; 你需要构造一个新的序列\(B\) ,满足: $B_{i} \le B_{i+1} (1 \le i \lt n ) $ $\sum_{i=1} ...

  2. ThinkPad T410i 2516A21 升級手札(換SSD固態硬碟、I7 CPU、開機20秒)

    最近筆記本越來越慢,開機得20分鐘,而且CPU動不動就飆到80度,趁著開學網上活動,準備給老伙計來一次重大升級.查一下主板芯片,最高支持8G內存,已經滿了,光驅位加了一個1T機械硬盤,那麼能升級的就只 ...

  3. CSS Variables:css自定义属性的使用

    CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...

  4. struct iphdr

    struct iphdr { #if defined(__LITTLE_ENDIAN_BITFIELD) __u8 ihl:, version:; #elif defined (__BIG_ENDIA ...

  5. Luogu3379 【模板】最近公共祖先(LCA)

    题面 题解 这里讲一种硬核做法. 首先\(\mathrm{dfs}\)整棵树,求出这棵树的欧拉序,然后\(\mathrm{LCA}\)问题就变成了\(\pm 1\mathrm{RMQ}\)问题. 考虑 ...

  6. (转载)OpenStack client 调用分析

    https://blog.csdn.net/yenai2008/article/details/72722038?utm_source=itdadao&utm_medium=referral# ...

  7. 【软工实践】Alpha冲刺(6/6)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...

  8. epoll 或者 kqueue 的原理是什么?

    来自知乎:http://www.zhihu.com/question/20122137 epoll 或者 kqueue 的原理是什么? 为什么epoll和kqueue可以用基于事件的方式,单线程的实现 ...

  9. idea docker docker-compose发布springboot站点到tomcat

    允许docker被远程访问 见:https://www.cnblogs.com/wintersoft/p/10921396.html 教程:https://spring.io/guides/gs/sp ...

  10. deepnude | 福利

    程序好下载github有,但是没有lib,就是没有训练好的model. 以下是搜到的win平台程序的下载链接: magnet:?xt=urn:btih:7BE4EB8D640742D2FFEBD649 ...