zoukankan      html  css  js  c++  java
  • 链接、单选按钮虚线框与focus:this.blur()与outline

    10-13
    http://taligarsiel.com/Projects/howbrowserswork1.htm#The_main_flow

    去除单选按钮/链接获取焦点时虚线框

    一种解决方法:onfocus = "this.blur()"

    在点击后立即使其失去焦点。很好达到去除虚线框的效果,各浏览器均有效。但此时tab键失效,在点击该链接or单选按钮后失去焦点,tab无法向下选择。

    从实现方法上来说也违背了正常的逻辑。同时关于this.blur()的利弊可参见下此博文:关于使用onfocus=”this.blur()”的利与弊

    另一种解决方法:a:focus{定义outline属性}

    outline属性:【outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓线不会占据空间,也不一定是矩形。】

    outline用于控制这里所说的虚线框的样式。(IE6、7不支持该属性。:focus伪类,IE6、7亦不支持。IE6、7:元素的hidefocus属性,不影响tab,只是隐藏虚线框。)

    可以简单隐藏,a:focus{outline:none;}。

    然而,因尽量承认虚线框突出当前焦点的合理性

    可以给focus定义替代样式。但定义:focus样式,效果在各浏览器有差异。例如,ie6、7不支持,so一直是小虚线框,ie8/9没什么问题,只是单选按钮会显示背景色,如果设定了。firefox下一切正常,单选按钮无背景色。chrome,不响应对单选按钮、a:focus定义,有文本框有效。但tab键时会有默认样式突出显示当前焦点元素。

     

    http://css-tricks.com/removing-the-dotted-outline/
    Because that outline was providing an important accessibility feature, you should really (really) consider adding back in a style for your links focus and active states.

    http://www.outlinenone.com/#test1

    If you must remove it, provide alternative styling

    与:hover,:active同时定义:focus.

    Personally, I just like to make them the same as the hover state. It's about the same thing, as far as actual function. Whatever your hover state is, even if it's shifting a background image or changing size or whatever, it can be joined with the active and focus states. Like so:

    a:hover, a:active, a:focus {  // styling for any way a link is about to be used }

    测试:






    click me, you can also see my outline.


    结论:承认虚线框的合理性。必要时自己掂量着办...

  • 相关阅读:
    fedora 27
    Python3 字符串操作
    python3 使用matplotlib画图问题
    Python3 移动文件——合集
    MySQL开放外部链接
    python之csv操作问题
    Question
    17-12-21
    python之List排序
    ubuntu版的sublime-text3输入中文问题
  • 原文地址:https://www.cnblogs.com/cydin/p/3384634.html
Copyright © 2011-2022 走看看