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

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

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

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

当前，当聚焦输入元素时，将显示大纲

比尔， Raimonds试试这个

输入：焦点{
大纲：#00bff实心1px！重要
}

只需在单击时将其模糊即可

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

这将在单击时从输入中删除焦点，从而取消对

：focus

的css规则的触发，而如果您的输入通过键盘导航获得焦点，则仍将应用该规则

编辑：只是在Chrome/Windows 7中试用过，似乎没有达到预期效果。

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

---

您可以在js或css for js中执行此操作，您必须使用模糊，或者在css中可以使用

：focus

。这是两者的一个例子

使用css

使用js

对于你的情况，使用这个

这是一把小提琴

希望它能解决你的问题

//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;
}

//HTML
//JS
$（“输入”）。单击（函数（）{
$（this.addClass（'focus'）；
});
$（“输入”）.blur（函数（）{
$（this.removeClass（'focus'）；
});
//CSS
输入：焦点{
外形：2倍纯蓝；
}
输入焦点{
大纲：无；
}

可能使用JavaScript？您应该在笔中加载jquery。personnaly我会使用onclick事件：（您的代码笔设置为onfocus事件）blur（）和css（）都可以工作；）事实上，我无法添加它，因为我的Chrome在我尝试添加时崩溃了。