Question

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

我在我的：CSS文件中的焦点选择器上使用了这个属性：

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

目前，当输入元素被聚焦时，会出现轮廓。

BR， Raimonds

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

Answer 2

你可以用js或css为js你必须使用模糊或css你可以使用:focus。以下是两者的一个例子。

使用css using css in fiddle

使用js using js in fiddle

为您的案例使用此

Fiddle

Answer 3

这是一个小提琴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;
}

Answer 4

试试这个，

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

CSS概述了表单中的输入元素

4 个答案: