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 中檢視或編輯動畫程式碼。