CSS 基本用户界面

CSS 基本用户界面模块允许您定义与用户界面相关功能的渲染和功能，包括轮廓属性、指向设备和键盘的视觉反馈，以及修改 UI 小部件的默认外观。

基本用户界面属性可以通过提供与正在交互的元素的视觉提示来改善用户体验和可访问性，包括样式化鼠标光标和键盘方向焦点导航，以及当可编辑元素获得焦点时样式化插入符号光标。该模块包括为获得焦点（或未获得焦点）的元素提供轮廓的功能，而不会影响元素的盒模型尺寸和样式。此 UI 模块还支持样式化用户界面控件。

基本用户界面示例

要查看基本用户界面属性如何改变 UI 功能的外观，请与此示例中的元素进行交互。请注意，此示例中的某些功能可以提高可用性，而另一些则会损害用户体验。

<div><span contenteditable>Edit this text </span></div>
<fieldset>
  <legend>Play with these fake form controls</legend>
  <input type="checkbox" id="check" />
  <input type="radio" name="a" />
  <input type="radio" name="a" />
  <input type="range" />
  <progress></progress>
</fieldset>
<fieldset>
  <legend>Be careful not to ruin usability: try resizing these.</legend>
  <textarea>
  cursor: wait;
  </textarea>
  <textarea>
  resize: none;
  </textarea>
  <textarea>
  pointer-events: none;
  </textarea>
</fieldset>

body {
  font-family: sans-serif;
  font-size: 1.25rem;
}
[contenteditable] {
  cursor: copy;
  caret-color: magenta;
  border: 1px solid #cccccc;
}
:focus {
  outline: dashed magenta 3px;
  outline-offset: 10px;
}
* {
  accent-color: magenta;
}
div,
fieldset {
  margin: 20px;
}
textarea:nth-of-type(1) {
  cursor: wait;
}
textarea:nth-of-type(2) {
  resize: none;
}
textarea:nth-of-type(3) {
  pointer-events: none;
}

CSS outline 和 outline-offset 属性用于向用户提供当前哪个元素具有焦点的反馈。accent-color 为所有表单控件提供主题颜色。编辑文本时出现的插入符号具有相同的颜色，这要归功于 caret-color 属性。这些都可以被视为 UI 改进。

某些功能会损害可用性。cursor 属性用于将光标从浏览器默认值更改，这令人困惑。resize 属性阻止第二个 <textarea> 可调整大小，而 pointer-events 属性阻止第三个 <textarea> 接收点击事件。它仍然可以使用键盘获得焦点。

点击上方示例中的“播放”按钮，可以在 MDN Playground 中查看或编辑动画代码。