CSS basic user interface

Basic user interface trong thực tế

Để xem các thuộc tính basic user interface có thể thay đổi giao diện của các tính năng UI như thế nào, hãy tương tác với các phần tử trong mẫu này. Lưu ý rằng một số tính năng trong mẫu này cải thiện tính khả dụng trong khi các tính năng khác gây hại cho trải nghiệm người dùng.

<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;
}

Các thuộc tính CSS outline và outline-offset được sử dụng để cung cấp phản hồi cho người dùng về phần tử nào hiện đang được focus. Một accent-color cung cấp màu theme cho tất cả các form control. Con trỏ caret xuất hiện khi văn bản được chỉnh sửa có cùng màu nhờ thuộc tính caret-color. Tất cả những điều này đều có thể được coi là cải tiến UI.

Một số tính năng gây hại cho tính khả dụng. Thuộc tính cursor được sử dụng để thay đổi con trỏ khỏi mặc định của trình duyệt, điều này gây nhầm lẫn. Thuộc tính resize ngăn <textarea> thứ hai không thể thay đổi kích thước trong khi thuộc tính pointer-events ngăn <textarea> thứ ba nhận sự kiện nhấp chuột. Nó vẫn có thể được focus bằng bàn phím.

Nhấp "Play" trong ví dụ trên để xem hoặc chỉnh sửa mã cho hoạt ảnh trong MDN Playground.

Tham chiếu

Thuộc tính

• accent-color
• appearance
• caret-animation
• caret-color
• caret-shape
• cursor
• interest-delay, viết tắt cho:
  • interest-delay-start
  • interest-delay-end
• outline, viết tắt cho:
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Module CSS basic user interface cũng xác định các thuộc tính caret, nav-down, nav-left, nav-right, và nav-up. Hiện tại, không có trình duyệt nào hỗ trợ các tính năng này.

Hướng dẫn

Learn forms: advanced form styling

Giải thích cách appearance có thể được sử dụng để định kiểu các form control.

Khái niệm liên quan

• Thuộc tính CSS cursor
• Thuộc tính SVG cursor
• Pseudo-class CSS :focus, :focus-within, và :focus-visible
• Interface CaretPosition

Thông số kỹ thuật

Xem thêm

• Tips for Designing Useful and Usable Focus Indicators (2016)