CSS揭秘（六用户体验）

一、鼠标

鼠标禁用

:disabled, [disabled], [aria-disabled="true"] { cursor: not-allowed; } 隐藏鼠标 cursor: none; 伪元素扩大可点击区域   二、自定义复选框 一个新的伪类 :checked。这个伪类只在复选框被勾选时才会匹配，不论这个勾选状态是由用户交互触发，还是由脚本触发。 可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。 其实有一个元素总是跟复选框形影不离、息息相关，它就是 （标签元素）。当 元素与复选框关联之后，也可以起到触发开关的作用。 可以为它添加生成性内容（伪元素），并基于复选框的状态来为其设置样式。然后，就可以把真正的复选框隐藏起来（但不能把它从 tab 键切换焦点的队列中完全删除），再把生成性内容美化一番，用来顶替原来的复选框！ Awesome!   input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); }   input[type="checkbox"]:checked + label::before { content: '\2713'; background: yellowgreen; }   input[type="checkbox"] + label::before { content: '\a0'; /* 不换行空格 */ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; }