表单中输入元素周围的 CSS 轮廓答案

【问题标题】：CSS outline around input element in the form表单中输入元素周围的 CSS 轮廓
【发布时间】：2015-06-03 11:18:38
【问题描述】：

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

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

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

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

BR, 雷蒙兹

【问题讨论】：

也许使用 JavaScript？

标签： javascript html css

【解决方案1】：

点击时模糊它。

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

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

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

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

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

【讨论】：

你应该在你的笔中加载 jquery。我个人会使用 onclick 事件：codepen.io/gc-nomade/pen/YXZxVX（您的 codepen 设置为 onfocus 事件）blur() 和 css() 都有效；)
实际上，我无法添加它，因为我的 Chrome 在我尝试添加它的那一刻就崩溃了。

【解决方案2】：

这是一个小提琴https://jsfiddle.net/hyauyovm/2/

希望它能解决你的问题

//HTML
<input>
<input>
<input>
<input>


//JS    
<script>

$("input").click(function(){
    $(this).addClass('focus');
});

$("input").blur(function(){
    $(this).removeClass('focus');
});

</script>    



//CSS    
input:focus{
    outline:2px solid blue;
}

input.focus{
    outline:none;
}

【讨论】：

【解决方案3】：

您可以在 js 或 css 中执行此操作，对于必须使用 blur 的 js 或在 css 中您可以使用 :focus。这是两者的示例。

使用 CSS using css in fiddle

使用js using js in fiddle

根据你的情况使用这个

Fiddle

【讨论】：

【解决方案4】：

试试这个，

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

【讨论】：