摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。
背景
之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。
浏览器自动会给输入框input、textarea的outline 属性设置一个默认值，效果就是当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消失。由于不同浏览器outline 属性的默认值不同，导致外边框的颜色也不同。如果不想要浏览器的outline默认设置，只需要将 outline 属性设置为none 即可。
所以一开始听到这个需求，感觉特别简单，不就是纯 CSS 的问题嘛！我只要将所有输入框的 outline 属性设置为浏览器默认的值就好了，但我想的太天真了。。。。
1、如何复制浏览器默认的 outline 样式由于网页中已有的输入框的样式遍布在各个文件中，有一种非常机械的办法，那就是到每个文件中去删除掉输入框的 outline：none样式，这样输入框就会使用浏览器默认的 outline 样式了。但是这样做要改的地方太多了，会疯掉的！再想想有没有更省事的方法，有了！在最基本的base.css样式文件中给输入框添加一个focus时候的outline样式不就解决了么。那么问题来了，该将outline 设置何值，才能自动使用浏览器默认的outline样式呢？
我第一个想到的方法是将 outline设置为auto，但发现只有webkit 内核的浏览器才支持这个属性值，firefox 不支持，因为auto 并不是标准的outline 值。所以要想直接复制浏览器默认的outline样式是做不到的。难道我要针对每个浏览器设置不同的outline 值，为了这么一点破需求费那么大工夫？！算了，省事点的方式还是直接摒弃浏览器的默认outline样式，统一将outline设置为一种样式好了。
2、避开 outline，选择 border但我发现了新问题，通过设置outline样式为输入框添加外边框，效果并不好。因为 outline 没有类似 border-radius的属性来改变边角的弧度。这样就导致了一个问题：当输入框设置了border颜色，同时border-radius为3px以上时，能明显的看到outline 外边框并没有和border 重合。看来设置 outline 来达到边框变蓝效果并不是最好的选择，为什么不选用设置 border 来达到同样的效果呢？只要将border再设置下 border-shadow,那么看起来也是和outline效果一样的，而且border还能设置border-radius，显示效果更满足需求。
3、如何让任何一个元素都能 focusable通过设置 border 解决了大多数输入框，但发现又有了新问题。
网页中有些输入框其实并不是单一使用 input/textarea来实现的，这类“输入框”看起来和一般输入框并无两样，但其实 HTML 结构是一个 div 里面包含着一个 input/textarea 来实现的。而且输入框的边框设置在了父元素 div 上，所有当输入框获得焦点时，看到的应该是父元素 div 上的边框变蓝，而不是里面的input/textarea 的边框变蓝。
要想获得焦点时父元素 div的边框变蓝，肯定可行的方法是通过 JS 来实现：给input/textarea 绑定一个 focus 和 一个blur事件，在focus 事件处理函数中将父元素div的边框置蓝，在blur事件处理函数中将父元素div的边框恢复原样。这种方法时绝对可行的，但是我总觉得应该有更简单的，纯粹使用 css 实现的方法。
如果想单纯通过css 实现，首先想到的是用选择器div:focus。但是发现div上无法使用:focus伪类。于是我就猜想：可能并不是所有的元素都是 focusable的，那么得找一份说明哪些元素 focusable的规范。
哪些元素是 focusable的？搜索结果：
根据 DOM Level 2 HTML规范，focusable 的DOM元素都会有一个原生的focus()方法，只有 focusable 的DOM 元素才有 focus 事件，才能使用:focus伪类。拥有原生的focus()方法的DOM元素包括几种：HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement。很明显，规范中遗漏了HTMLButtonElement and HTMLAreaElement。
虽然规范这么定义，但浏览器在实现时却是另外一套。浏览器给任何一个 HTMLElement 都定义focus()方法，但并不是任何一个HTMLElement 都能获得焦点（获得焦点术语叫 active, 具体请参考：http://help.dottoro.com/ljqmdirr.php）。一般来说，任何一个时刻HTML 文档中只会有一个active元素，但并不是任何一个元素都能成为active元素。能成为active 的元素包括：
表单元素(form controllers)：input/option/textarea/button
链接元素(links)：a标签、area标签（必须要带 href 属性，包括 href 属性为空）
可以被编辑的元素（包括通过添加 contenteditable = "true"属性变成可编辑的情况）
设置了 tabindex 属性（tabindex 值非-1）的元素
window：当页面窗口从隐藏变成前置可见时，focus 事件就会触发
根据搜索结果，要想将父元素div变成focusable，只需要在元素上设置 tabindex 属性，然后通过:focus伪类设置父元素div 获得焦点时的border样式。但我发现当鼠标点击里面的 input 元素时，父元素div并没有获得焦点，获得焦点的是子元素input。
所以最后还是没能通过纯 css 的方法来解决这个问题，无奈之下我还是通过js去解决了。。。。。。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86107.html
摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。 背景 之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...
这篇文章主要是阐述了selenium可视化数据抓取有效的方法实现，文中根据举例编码讲到的十分详尽，对大家学习培训还是工作具有很强的参照学习培训使用价值，需求的小伙伴们下边伴随着小编就来互相学习了解一下吧。 Selenium是一个自动化技术检测工具，运用它能够推动电脑浏览器实行特殊动作，如鼠标点击、下拉框等操作，同时也可以获取电脑浏览器现阶段获得界面的程序代码，保证由此可见即可获得。对于有些J...
此篇文章主要是详细介绍了pythonGUI多列输入文本Text的控制方式，具有非常好的实用价值，希望能帮助到大家。如有误或者未考虑到真正的地区，望鼎力相助 Text的属性wrap fromtkinterimport* root=Tk() root.geometry('200x300') te=Text(root,height=20,width=15) #将多...
文章主要是详细介绍了pythonGUI多做输入文本Text的控制方式，具有非常好的实用价值，希望能帮助到大家。如有误或者未考虑到真正的地区，望鼎力相助 Text的属性wrap fromtkinterimport* root=Tk() root.geometry('200x300') te=Text(root,height=20,width=15) #将多做输...
阅读 3212·2021-11-12 10:36
阅读 2602·2021-09-22 15:35
阅读 2053·2021-09-22 10:02
阅读 2658·2021-09-04 16:41
阅读 1003·2019-08-30 15:55
阅读 3439·2019-08-29 18:43
阅读 1960·2019-08-23 18:24
阅读 1246·2019-08-23 18:10
