#书摘 #css #前端
《CSS 选择器世界》7.3 聚焦行为伪类:focus与用户体验
:focus是一个从IE8浏览器开始支持的伪类，它可以匹配当前处于聚焦状态的元素。

1. 与:active伪类不同，:focus伪类默认只能匹配特定的元素，包括：
● 非disabled状态的表单元素，如 <input> 输入框、 <select> 下拉框、`<button>` 按钮等；
● 包含href属性的 <a> 元素；
● <area> 元素，不过可以生效的CSS属性有限；
● HTML5中的 <summary> 元素。

除上述特定元素之外，其他HTML元素应用:focus伪类是无效的。
如何让普通元素也能响应:focus伪类呢？设置了HTML contenteditable 属性的普通元素可以应用:focus伪类，例如：


<div contenteditable="true></div>
<div contenteditable="plaintext-only"></div>​​



因为此时 <div> 元素是一个类似 <textarea> 元素的输入框。
设置了HTML tabindex属性的普通元素也可以应用:focus伪类，例如，下面3种写法都是可以的：


<div tabindex="-1">内容</div>
<div tabindex="0">内容</div>
<div tabindex="1">内容</div>​​



如果期望 <div> 元素可以被Tab键索引，且被点击的时候可以触发:focus伪类样式，则使用tabindex="0"；如果不期望 <div> 元素可以被Tab键索引，且只在它被点击的时候触发:focus伪类样式，则使用tabindex="-1"。对于普通元素，不存在使用自然数作为tabindex属性值的场景。

2. 模拟表单元素的键盘可访问性 [type="radio"]`、 `[type="checkbox"]`、`[type="range"] 类型的`<input>`元素的UI往往不符合网站的设计风格，需要自定义样式，常规实现一般都没问题，关键是很多开发人员会忘了键盘的无障碍访问。
以 [type="checkbox"] 复选框为例，我们需要隐藏原生的`[type="checkbox"]` 复选框，使用关联的 <label> 元素自定义的复选框样式（如果不需要兼容IE和IE Edge浏览器，则无须 <label> 元素模拟）。

● 对于原生复选框元素的隐藏，要么设置透明度opacity:0，要么剪裁，千万不要使用visibility:hidden或者display:none进行隐藏，虽然IE9及以上版本的浏览器的功能是正常的，但是这两种隐藏是无法被键盘聚焦，键盘不可访问。
● 不要忘记在原生复选框聚焦的时候高亮显示自定义的输入框元素，可以是边框高亮，或者外发光，通常都使用相邻兄弟选择符(+)实现，特殊情况下也可以使用兄弟选择符(~)，如高亮多个元素时。

市面上有不少UI框架，如何区分品质？很简单，使用Tab键索引页面元素，如果输入框有高亮显示，则这个UI框架比较专业，如果什么反应都没有，建议换一种UI框架。

https://memo.cosine.ren/m/334