为什么伪元素：使用TAB时重点按钮，但不是点击？ [英] Why pseudo element :focus on button when using TAB but not click?
问题描述
我正在研究表单元素的默认功能，以及浏览器之间的不同状态。我发现一些很奇怪的东西。这已经在不同的浏览器测试，结果是类似的。下面的截图来自Chrome v44.0.2403.155m（64位Windows）。
确定，所以问题是按钮的焦点状态。下面你将看到一个没有CSS样式的默认表单。我点击第一个输入，然后使用Tab键来选择表单元素。在chrome中，你会得到一个浅蓝色的轮廓应用到每个元素，您的选项卡。
请注意，当我点击按钮与鼠标没有浅蓝色的焦点状态，它只发生时，我的选项卡。
我假设这只是使用：focus，如果我设置了button：focus，那么我就能够复制这个默认行为。标签到一个按钮，它突出显示，点击一个按钮，它不。看看这个样式版本的形式...
当我点击第一个输入和标签，它做同样的事情，我的自定义大纲显示（这是很好）。但是，请注意，当我点击按钮，它正在应用：focus状态。这与默认行为不一样。在非风格版本中，点击不会应用焦点状态。
我在按钮上使用的CSS是...
输入：focus，button：focus {
outline：2px solid green;
}
这是一个演示：
这不会在按钮。 （这可能是因为Chrome在Mac上，因为标签页不会创建大纲）
当我将这个添加到样式表单中的按钮而不是您添加的大纲时，它不会获得蓝色dropshadow你得到时，通过。这奇怪，如果你问我。当我google -webkit-focus-ring-color 时，我来到这个问题SO 。在这个答案，他写了一些关于 [NSColor keyboardFocusIndicatorColor] ，真的谈到键盘焦点（通过窗体标签），而不是鼠标焦点。
当在焦点指标上搜索一下时，我登录了 Focus（计算），包含以下文本：
按照惯例，tab键用于将焦点移动到下一个可调焦组件，并将+选项卡移动到上一个。当图形界面被首次引入时，许多计算机没有鼠标，所以这个选择是必要的。
这告诉我焦点的焦点on按钮只显示一个键盘按下，因为在开始有必要显示什么元素被关注，而现在用鼠标它清楚了正在关注什么，因为你正在主动移动鼠标到按钮。 / p>
I was looking into the default functionality of form elements and what different states they have between browsers. I found something quite strange. This has been tested in different browsers and the results are similar. The screenshots below are from Chrome v44.0.2403.155m (64-bit Windows).
Ok, so the problem is with focus states of buttons. Below you will see a default form with no css styling. I click on the first input and then use the Tab Key to tab down the form elements. In chrome you get a light blue outline applied to every element you tab onto.
Notice that when I click on the button with the mouse there is no light blue "focus" state it only happens when I tab onto it.
I presumed this was just using :focus, and if I styled button:focus then I would be able to replicate this default behavior. Tab onto a button it highlights, click on a button it does not. Have a look at this styled version of the form...
When I click on the first input and tab down it does the same thing, my custom outline is shown (this is fine). However, notice when I click on the button, it is applying the :focus state to it. This is not the same as the default behavior. In the un-styled version, a click does not apply a focus state.
The only CSS I am using on the button is...
input:focus, button:focus {
outline: 2px solid green;
}
Here is a demo: http://jsfiddle.net/oy83s4up
How do I make sure there is no outline when the button is clicked, only when it is tabbed?. Also, by default when a button is focused with the tab key, even when it is clicked, the outline still remains, this is also functionality I want to replicate.
Note: I am not looking for a JS work around, The first animation is default behavior in the browser. Surely it can replicated with css only? If not, then it is a bug.
Interesting question!
What I noticed when inspecting the button through Inspect Element and triggering a :focus, the button gets the style outline: -webkit-focus-ring-color auto 5px;.
This does not create an outline on the button though. (This could be because of Chrome on Mac, since tabbing doesn't create an outline either)
When I add this to the button in the styled form instead of your added outline, it doesn't get the blue dropshadow you get when tabbing through. This weird if you ask me. When I google -webkit-focus-ring-color, I come to this question on SO. In that answer, he writes something about [NSColor keyboardFocusIndicatorColor], which really talks about keyboard focus (tabbing through the form) and not mouse focus.
When googling a bit on focus indicators, I landed on the Wikipedia-page for Focus (computing), containing the following piece of text:
By convention, the tab key is used to move the focus to the next focusable component and shift + tab to the previous one. When graphical interfaces were first introduced, many computers did not have mice, so this alternative was necessary. This feature makes it easier for people that have a hard time using a mouse to use the user interface.
This tells me 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.
这篇关于为什么伪元素：使用TAB时重点按钮，但不是点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
