首页 > 代码库 > Firefox的-moz-focus-inner
Firefox的-moz-focus-inner
Firefox中,::-moz-focus-outer
和::-moz-focus-inner
伪元素主要针对按钮类型的元素,包括button
类型, reset
类型以及submit
类型。
button使用行高让文字垂直居中,但是在firefox里文字会偏下,而且点击的时候中间会有一个虚线框。Firefox的button系统样式如下:
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; padding: 0 2px; } button:-moz-focusring::-moz-focus-inner, input[type=”reset”]:-moz-focusring::-moz-focus-inner, input[type=”button”]:-moz-focusring::-moz-focus-inner,
input[type=”submit”]:-moz-focusring::-moz-focus-inner, input[type=”file”] > input[type=”button”]:-moz-focusring::-moz-focus-inner { border-color: buttontext; }
解决方案:
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 /*去虚线框*/; padding:0; }
其实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果:
:focus { outline:none; /*for IE*/ } ::-moz-focus-inner { border-color: transparent; /*for mozilla*/ }
Firefox的-moz-focus-inner
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。