表单button的outline在firefox浏览器下的问题


Posted in HTML / CSS onDecember 24, 2012

outline的使用,大家都喜欢在reset样式表中直接重置:

复制代码
代码如下:

* {
outline: none;
}
 
Eric Meyers 在他的CSS Reset 是这样重置的:
复制代码
代码如下:

/* remember to define focus styles! */
:focus {
outline: 0;
}
 

这些方法大家都可以说常见了。可是有一点可能大家还是不太清楚——outline在表单的button中使用时,在firefox浏览器下依然还是会有虚线框显示的。正好今天有一位朋友也问起这个问题,于是查了一下相关资料,才得知在Firefox下是需要使用别的方法来处理的。那么今天这个教程就简单的来了解如何处理这个问题。

问题描述:

前面也说了,很多设计师喜欢使用:

复制代码
代码如下:

*{outline:none;}
或者
:focus {outline:none;}

来解决焦点粗虚线框的问题。但是你有没有注意到,使用这种方法,对于button在Firefox下还是会有虚线框的,如下图所示:

表单button的outline在firefox浏览器下的问题

解决方法:

解决这个bug我们需要使用Mozilla的一个私有属性:-moz-focus-inner。不过这里有一点大家需要特别的注意:通过“-moz-focus-inner”并不是重置“outline”这个属性的值,而是需要通过他来改变buttons的“border”样式,具体的请看下面的代码:

复制代码
代码如下:

input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
}
 
上面写是包括了所有的input,但有时我们并不想这个值对“input[type=text]”有影响,那么我样其实可以这样来设置:
复制代码
代码如下:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}

通过上面的代码,那个难看的虚线框,我们就可以顺利的移除:

表单button的outline在firefox浏览器下的问题

这样一来,我们其实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果:

复制代码
代码如下:

:focus {outline:none;} /*for IE*/
::-moz-focus-inner {border-color: transparent;} /*for mozilla*/
       
这样表单button得到焦点,在各浏览器下的渲染效果就一致了。

上面是去除outline的边框效果的写法,但那样或许不太好理解,那么你也可以像设置正常样式那来理解,如下面的代码所示:

复制代码
代码如下:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 1px dotted transparent;
}
button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
padding: 3px;
border-color: #F3F3F3;
}

上面的使用可算是一个小技巧吧,可能知道的人也蛮多的,我也就不在多说这样的问题,因为要我来说是怎么一回事,我也实在没有那样的水平来说清楚,但我只知道这样的方法能解决问题。那么有关于“outline”的使用还是蛮多的;希望上面的这段代码大家用得上,如果你有更好的解决办法,希望在评论中给我留言。
HTML / CSS 相关文章推荐
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 #HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 #HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 #HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 #HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 #HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 #HTML / CSS
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python使用PyCharm进行远程开发和调试
2017/11/02 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
高中自我鉴定
2013/12/20 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
上学迟到的检讨书
2014/01/11 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
学生吸烟检讨书
2014/09/14 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
群众路线表态发言材料
2014/10/17 职场文书
英语感谢信范文
2015/01/20 职场文书
工程部部长岗位职责
2015/02/12 职场文书
让生命充满爱观后感
2015/06/08 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Java 在生活中的 10 大应用
2021/11/02 Java/Android