CSS 基本用户界面

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

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

基本用户界面在行动

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

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

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

要查看此基本用户界面示例的代码，请 在 GitHub 上查看源代码.

参考

属性

指南

了解表单：高级表单样式

解释了如何使用 appearance 来样式化表单控件。

规范

规范
CSS 基本用户界面模块级别 4

另请参见