好的,所以问题是按钮的焦点状态.下面您将看到一个没有CSS样式的默认表单.我点击第一个输入,然后使用Tab键来缩小表单元素.在chrome中,您将获得一个浅蓝色的轮廓,应用于您标签的每个元素.
请注意,当我用鼠标点击按钮时,没有浅蓝色的“焦点”状态,只有当我选择它时才会发生.
我推测这只是使用：焦点,如果我的样式按钮：焦点,那么我将能够复制这个默认行为.标签到一个按钮,它突出显示,点击一个按钮它不.看看这个风格的版本的形式…
当我点击第一个输入和标签下拉它做同样的事情,我的自定义大纲被显示(这很好).但是,当我点击按钮时,请注意：它正在应用：焦点状态.这与默认行为不同.在未设计的版本中,单击不应用焦点状态.
我在按钮上使用的唯一CSS是…
input:focus,button:focus {
outline: 2px solid green;
}
这是一个演示：http://jsfiddle.net/oy83s4up
点击按钮时,只有当它被选中时,如何确保没有轮廓？此外,默认情况下,当按钮与标签键对齐时,即使是单击,轮廓仍然保留,这也是我要复制的功能.
注意：我不是在寻找一个JS的工作,第一个动画是浏览器中的默认行为.当然可以用CSS复制吗？如果没有,那就是一个bug.
解决方法
通过检查元素检查按钮并触发a：focus时,我注意到,按钮获取样式轮廓：-webkit-focus-ring-color auto 5px ;.
这不会在按钮上创建一个轮廓. (这可能是因为Mac上的Chrome,因为Tabing也不会创建一个大纲)
当我将这个添加到样式表单中的按钮而不是添加的大纲时,它不会得到你在Tab键通过时得到的蓝色阴影.如果你问我,这很奇怪当我google -webkit-focus-ring-color时,我来到了this question on SO.在那个答案中,他写了一些关于[NSColor keyboardFocusIndicatorColor]的内容,它真正谈论了键盘焦点(tabbing through the form),而不是鼠标焦点.
当谷歌搜索一些焦点指标时,我登陆了维基百科页面Focus (computing),其中包含以下文字：
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.
这告诉我,按钮的重点只能显示一个键盘按钮,因为一开始需要显示什么元素的重点,而现在用鼠标,这是清楚的是什么是专注,因为你正在积极地移动鼠标到按钮.
