javascript - 表单中输入元素周围的 CSS 轮廓

Question

有谁知道，是否可以在用户使用顺序导航(TAB 按钮)时在输入元素周围显示轮廓，并在用户用鼠标单击此输入元素时隐藏轮廓？有没有人实现过这种行为？

我在 CSS 文件中的 :focus 选择器上使用这个属性:

:focus {
outline: #00bfff solid 1px !important
}

目前，当输入元素获得焦点时，轮廓出现。

BR,雷蒙兹

Answer 1

只需在点击时对其进行模糊处理即可。

jQuery(document).ready(function() {
    jQuery('input').on('click', function() {
        jQuery(this).blur();
    });
});

这应该在单击时从输入中移除焦点，从而取消触发您的 :focus 的 css 规则，而如果您的输入通过键盘导航获得焦点，它仍然会应用。

编辑:刚刚在 Chrome/Windows 7 中试过，它似乎没有达到预期的效果。

如果有人想搭便车寻找可行的解决方案，这里有一支笔:

http://codepen.io/anon/pen/yNMoJv