使用tabindex进行控制的Chrome蓝色轮廓

Question

我有一个带有tabindex属性的下拉列表。

当我使用chrome点击鼠标时，我会在下拉列表周围看到蓝色轮廓。

如果我取消“tabindex”属性，则不会发生，但我没有此控件的tabindex。

如果我使用css取消大纲：

*:focus  
{  
    outline: none;  
}  

它也有效，但在使用标签移动时我没有得到轮廓（并且没有任何迹象表明此控件已被聚焦）。

有没有办法让这个大纲只在使用“标签”时显示，而不是在每次点击鼠标时显示？

Answer 1

我能想到的最简单的方法是编写自己的大纲样式。这可以很容易地应用于任何元素。

CSS：

.input {
    border-radius:7px;
    border:1px solid #ccc;
    outline:none;
}
.focused {
    border:1px solid #55d;
}

jQuery（因为onfocus在MDN page中有关于不能正常工作的注释）：

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

如果您确实需要它不显示点击次数，那么您需要这样的内容：

var clicked = false; //hold whether or not we have a click
$('input').click(function () { // if they click, flag it.
    clicked = true;
    $(this).removeClass('focused'); //remove the focus class in case it got set-see note.
    setTimeout(function() { // remove the click flag after 1/5th of a second.
        clicked = false;
    }, 200);
});

$('input').focus(function () { // when it gets focused, handle it.
     handle_it(this);
});

function handle_it(e){
   setTimeout(function() { // wait a bit, then check for the flag.
        if (clicked === false) { // they didn't click.
            $(e).addClass('focused');
        }
    }, 150); // you may need to tweak this value. 150 was right for opera, see note
}

$('input').blur(function () { // remove the focus
    $(this).removeClass("focused");
});

注意：focus在click之前应用，无论处理程序放在哪里（至少，这是我在jQuery1.11中找到的）。这意味着如果您想先点击应用，则必须延迟focus。 150ms对于歌剧来说是正确的，否则你会得到一个专注的风格。这就是我们在点击处理程序中删除类的原因。

如果你使用这种方法，你也可以使用阴影和淡入淡出以及各种漂亮的东西。

显然，您应该使用比'input'更具体的选择器。

小提琴：https://jsfiddle.net/gypvpvr7/1/