html – 为什么伪元素：使用TAB时不要点击？
|
我正在研究表单元素的默认功能以及浏览器之间的不同状态.我发现很奇怪的东西.这已经在不同的浏览器中进行了测试,结果类似.以下屏幕截图来自Chrome v44.0.2403.155m(64位
Windows).
好的,所以问题是按钮的焦点状态.下面您将看到一个没有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),其中包含以下文字：
这告诉我,按钮的重点只能显示一个键盘按钮,因为一开始需要显示什么元素的重点,而现在用鼠标,这是清楚的是什么是专注,因为你正在积极地移动鼠标到按钮. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |