表单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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php新建文件的方法实例
2019/09/26 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
python常见的格式化输出小结
2016/12/15 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Python如何急速下载第三方库详解
2020/11/02 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
公司市场部岗位职责
2013/12/02 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2016猴年春节问候语
2015/11/11 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书