Базовый интерфейс пользователя CSS

Чтобы увидеть, как свойства базового интерфейса пользователя могут изменить внешний вид элементов интерфейса, взаимодействуйте с элементами в этом примере. Обратите внимание, что некоторые функции в этом примере улучшают удобство использования, в то время как другие ухудшают пользовательский опыт.

Свойства CSS outline и outline-offset использовались для предоставления обратной связи пользователю о том, какой элемент в данный момент имеет фокус. accent-color предоставляет цвет темы для всех элементов управления формы. Курсор ввода, который появляется при редактировании текста, имеет тот же цвет благодаря свойству caret-color. Все это можно считать улучшениями пользовательского интерфейса.

Некоторые функции ухудшают удобство использования. Свойство cursor использовалось для изменения курсора от значения по умолчанию браузера, что вызывает путаницу. Свойство resize предотвращает изменение размера второго <textarea>, а свойство pointer-events предотвращает получение третьим <textarea> событий клика. Тем не менее, он все еще доступен для фокусировки с помощью клавиатуры.

Нажмите «Играть» в примере выше, чтобы увидеть или изменить код анимации в MDN Playground.

• accent-color
• appearance

• caret, сокращенно для:

  • caret-color
  • caret-shape
• cursor
• nav-down
• nav-left
• nav-right
• nav-up

• outline, сокращенно для:

  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Изучение форм: продвинутая стилизация форм

Объясняет, как appearance может использоваться для стилизации элементов управления формой.

• Свойство CSS cursor
• Атрибут SVG cursor
• Псевдоклассы CSS :focus, :focus-within и :focus-visible
• CaretPosition интерфейс

• Советы по проектированию полезных и удобных индикаторов фокуса (2016)