某些按钮具有：单击时应用的焦点样式

Why do some buttons get :focus style applied when clicking them and some don't? For example, angular-ui modal close buttons have it applied, but try W3Schools button element and it doesn't.

为什么有些按钮会得到:点击它们时会应用焦点样式而有些则没有?例如,angular-ui模态关闭按钮已应用它,但尝试W3Schools按钮元素,但它没有。

EDIT: I am reopening this question. Forgive me, I had forgotten a bit about this, because I really tought that it was solved until yesterday I really tried it out. So I did something like this: .btn:focus:not(:active) { outline: none;}, but the problem is that then it also doesn't show focus when using tab button. And forget about bootstrap at all, it's not it!

编辑:我正在重新打开这个问题。原谅我,我已经忘记了一点,因为我真的认为它已经解决,直到昨天我才真正尝试过。所以我做了类似这样的事情:.btn:focus:not(:active){outline:none;},但问题是当使用tab按钮时它也不会显示焦点。而且忘记了引导程序,它不是它!

It seems that the focus effect becomes visible on button click when it's background-color property for :focus is defferent from default. Maybe true for some other properties as well.

当它的背景颜色属性为:焦点与默认值不同时,似乎焦点效果在按钮单击时变得可见。也许对于其他一些属性也是如此。

So - if the background is default, then you can see focus effect only when using tab key or setting it to :focus manually. If the background is different, you can see the effect also on click. Plunker demonstrating this: https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview

因此 - 如果背景是默认的,那么只有在使用Tab键或将其设置为时才能看到焦点效果:手动对焦。如果背景不同,您也可以在点击时看到效果。 Plunker展示了这个:https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p =preview

Maybe I have answered my question myself, maybe not, don't know.

也许我自己也回答了我的问题,也许不是,不知道。

edit2: Just saw @musically_ut edit giving almost the same example.

edit2:刚刚看到@musically_ut编辑给出了几乎相同的例子。

UPDATE

After discussion with @Error404, I can clarify the question more precisely. So the question is - why default button's outline style is not showing when it has been clicked?

在与@ Error404讨论后,我可以更准确地澄清这个问题。所以问题是 - 为什么默认按钮的轮廓样式在点击时没有显示?

See "clicked" in bold, because it is not working only on click. It works when focusing on it using keyboards tab key, it works when setting it manually with developer tools.

请以粗体显示“已点击”,因为它仅在点击时无效。当使用键盘选项卡键对其进行聚焦时,它可以在使用开发人员工具手动设置时工作。

Mostly all answers so far argue that it loses or doesn't have focus at all when clicked, but it does. You can change button's background or border and probably some other property too and suddenly, when you click it, you see the outline. Or you can change the outline itself to something else in :focus rule and it will show also.

到目前为止,大多数答案都认为它在点击时会失去或根本没有焦点,但确实如此。您可以更改按钮的背景或边框以及可能的其他属性,当您单击它时,您会看到轮廓。或者您可以将轮廓本身更改为其他内容:焦点规则,它也会显示。

7 个解决方案

#1

angular-ui is based on Bootstrap css framework that manage lot's of little things for style.

angular-ui基于Bootstrap css框架,可以管理很多关于风格的小东西。

THe W3C example is only html without any kind of style applied.

W3C示例仅是html,没有应用任何样式。

#2

angular-ui modal probably has additional CSS which creates the :focus selector behaviour, whereas W3 school doesn't.

angular-ui modal可能有额外的CSS创建:焦点选择器行为,而W3学校没有。

#3

:focus pseudo class follows the element which has focus on the page. This can be a button, or an input, textarea, <a> link or any other element which can be Tabbed to (see: tabindex attribute) or given focus otherwise (touching, mouse-clicks, etc.).

:focus伪类遵循关注页面的元素。这可以是按钮,或输入,textarea,链接或任何其他元素,可以选项卡(参见:tabindex属性)或给定焦点(触摸,鼠标点击等)。

In the angular-ui example, nothing steals the focus away from the button after the click. However, on the W3-school, the focus is stolen by the alert box. Hence, the <button> loses the :focus pseudo class.

在angular-ui示例中,点击后没有任何东西会将焦点从按钮上移开。但是,在W3学校,重点是警报箱被盗。因此,

Curioser and curioser.

Curioser和curioser。

It seems that, on Chrome at least, the background-color CSS property on button:focus should be something other than #ddd for the button to keep focus after a click.

似乎至少在Chrome上,按钮上的背景颜色CSS属性应该是#ddd以外的其他内容,以便按钮在单击后保持焦点。

Demo: http://codepen.io/musically_ut/pen/eZjWeq

#4

After your comments, I think you are looking for the reason why a button with background-color: #ddd; does not have outline.

在您发表评论之后,我认为您正在寻找具有背景颜色的按钮的原因:#ddd;没有轮廓。

button.buttontag:focus {
  background-color: #ddd;
}

<button class="buttontag" type="button">Focus me</button>

The main reason here I think, is that is not an outline what you are looking for because if you disable it on a button with a different background-color, the focus effect still appears.

我认为这里的主要原因是,这不是你想要的大纲,因为如果你在具有不同背景颜色的按钮上禁用它,焦点效果仍然会出现。

button.buttontag:focus {
  background-color: #dde;
  outline: none; /* I also proved with 0 */
  -webkit-box-shadow: none;
}

<button class="buttontag" type="button">Focus me</button>

It seems that it is a special border because if you set another border is the only way this special border for focus will disappear.

它似乎是一个特殊的边框,因为如果你设置另一个边框是焦点的这个特殊边框将消失的唯一方法。

button.buttontag:focus {
  background-color: #dde;
  outline: 0;
  -webkit-box-shadow: none;
  border: 1px solid orange;
}

<button class="buttontag" type="button">Focus me</button>

I was curious about why this happens, maybe #ddd is the default special border colour was the main question I had on my mind. So let's know what border colour has.

我很好奇为什么会发生这种情况,也许#ddd是默认的特殊边框颜色是我心中的主要问题。所以让我们知道边框颜色有什么。

var buttontag = document.getElementById('buttontag');
buttontag.onfocus = function(){
  var border = window.getComputedStyle(buttontag).getPropertyValue("border");
  alert(border);
}

var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);

button {}
:focus {background-color: #ddd }

<button id="buttontag" type="button">Focus me</button>

It does not matter if it is on focus or not, it will always has the colour rgb(221, 221, 221) on the border which equivalent is #DDDDDD on hexadecimal and that is the same as #ddd.

它是否在焦点上无关紧要,它的边界上总是有颜色rgb(221,221,221),相当于十六进制的#DDDDDD,与#ddd相同。

We have it!: The reason why it does not seems that this button is on focus when it has background-color: #ddd; is because it has the same border colour as background-color so it does not has any contrast between them (background-color and border).

我们拥有它!:当它具有背景颜色时,这个按钮似乎不在焦点上的原因是:#ddd;是因为它具有与背景颜色相同的边框颜色,因此它们之间没有任何对比(背景颜色和边框)。

Remember: onfocus event just detects when a focus event is triggered on a button (or other focusable element). It does not have reference with anything about CSS, it just gets the event, but does not have anything related with CSS. It can has default values that the browser sets on the focusable element, though.

请记住:onfocus事件只检测在按钮(或其他可聚焦元素)上触发焦点事件的时间。它没有关于CSS的任何参考,它只是获取事件,但没有任何与CSS相关的东西。但它可以具有浏览器在可聚焦元素上设置的默认值。

Is the reason why if you change the background-color of the button it makes the effect as if you have clicked on the button, because both values are different and it makes contrast between them. If you set the same background-color you will never get the feel that the button is being clicked.

这就是为什么如果你改变按钮的背景颜色,它会产生效果就像你点击了按钮一样,因为两个值都不同,它们之间形成对比。如果设置相同的背景颜色,您将永远不会感觉到按钮被单击。

#5

:focus is a pseudo-class, which is used by tools like jQuery to trigger events, apply CSS styles, etc. Looking at the examples you provided, I do not see an explicit set of :focus. When a button is clicked, jQuery will interpret the button as :focus. a vanilla HTML button will not have this.

:focus是一个伪类,jQuery等工具使用它来触发事件,应用CSS样式等。看看你提供的例子,我没有看到一组明确的:焦点。单击一个按钮时,jQuery会将该按钮解释为:focus。一个vanilla HTML按钮不会有这个。

#6

I had this problem with All my AngularJs app, I usually remove the focus from buttons when they are clicked, I know this is a hack but it works :D.

我的所有AngularJs应用程序都遇到了这个问题,我通常会在点击按钮时从按钮中移除焦点,我知道这是一个黑客但它有效:D。

$('.btn').click(function(){
    $(this).blur();
});

#7

If you don't want to show focus outline use below piece of code,

如果您不想在下面的代码段中显示焦点轮廓,

<button type="button" tabindex="-1">Click Me!</button>

 :focus {outline:none;}

And if you want to outline on focus then use below piece of code,

如果你想要重点关注焦点,那么使用下面的代码,

 :focus {outline: 1px solid #5B9DD9}

Other styles(like background or border etc.) you can use as you want to. I hope this will help, if you have doubt then let me know.

您可以根据需要使用其他样式(如背景或边框等)。我希望这会有所帮助,如果您有疑问,请告诉我。

Thanks

UPDATE :

What I noticed when inspecting the button through Inspect Element and triggering a :focus, the button gets the style

通过Inspect Element检查按钮并触发a:focus时,我注意到了该按钮获得了样式

:focus { outline: -webkit-focus-ring-color auto 5px; }

This does not create an outline on the button, though.

但是,这不会在按钮上创建轮廓。

After debugging and reading some pages on internet i come to know that the focus on button only shows up with a keyboard press, because in the beginning it was necessary to show what element is focused on while now with a mouse it's clear what is being focused on, since you are actively moving the mouse to the button

在调试和阅读互联网上的一些页面后,我开始知道按钮上的焦点只显示键盘按下,因为在开始时有必要显示什么元素集中在现在用鼠标显示什么是焦点因为你正在积极地将鼠标移动到按钮上

#1