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. 使用readthedocs 发布 sphinx doc文档

    readthedocs 是由社区驱动的开源sphinx doc 托管服务,我们可以用来方便的构建以及发布文档 这是一个简单的demo 项目,使用了用的比较多的sphinx_rtd_theme 主题,主 ...

  2. 移动端tap事件(轻击、轻触)

    一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...

  3. Cogs 739. [网络流24题] 运输问题(费用流)

    [网络流24题] 运输问题 ★★ 输入文件:tran.in 输出文件:tran.out 简单对比 时间限制:1 s 内存限制:128 MB «问题描述: «编程任务: 对于给定的m 个仓库和n 个零售 ...

  4. Linux基础及常用指令

    1.Linux目录结构 bin(usr/bin,user/local/bin) #存放常用指令,如cp.cat.chown等 sbin(usr/sbin,user/local/sbin) #高权限指令 ...

  5. HttpClient 发送请求和参数

    发送请求 没有参数 private static void getData() { String timeStamp = String.valueOf(System.currentTimeMillis ...

  6. SSH框架整合3——原生态SessionFactory

    ================================================web.xml============================================= ...

  7. Hadoop综合大作业1

    本次作业来源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3363 一.课程评分标准: 分数组成: 考勤 10 平时作业 30 爬 ...

  8. TOMCAT 可以稳定支持的最大并发用户数

      微软系统平台上 TOMCAT性能调优后可以稳定支持的最大并发用户数量在300人服务器配置:   单硬盘,SATA 8MB缓存测试服务器和loadrunner运行服务器位于同一网段 100MB网络( ...

  9. [转]白话HTTP短连接中的Session和Token

    我经常想象并怀念三十年前那原始而美好的互联网旧时光, 工作很轻松, 生活很悠闲. 上班的时候偶尔有些HTTP的请求发到我这里, 我简单的看一下, 取出相对应的html文档,图片,发回去就可以了, 然后 ...

  10. Spark程序进行单元测试-使用scala

    Spark 中进行一些单元测试技巧:最近刚写了一点Spark上的单元测试,大概整理了一些 rdd测试 spark程序一般从集群中读取数据然后通过rdd进行转换,这其中涉及到集群,每次修改bug,上传到 ...