Thuộc tính User Interface trong CSS3

Giới thiệu

Module CSS3 User Interface cung cấp các thuộc tính cho phép tùy chỉnh giao diện và hành vi tương tác của các phần tử HTML, biến chúng thành các điều khiển UI chuẩn (như input, button, scrollbar, v.v.).

Các thuộc tính chính

Thuộc tính	Mô tả	Trạng thái
`appearance`	Cho phép hiển thị phần tử như một UI control gốc của hệ điều hành (button, checkbox, textbox, menulist...)	Hỗ trợ tốt (cần prefix -webkit-, -moz-)
`box-sizing`	Điều khiển cách tính width/height: `content-box` (mặc định) hay `border-box` (kẻo padding/border)	Hỗ trợ hoàn toàn
`caret-color`	Đặt màu con trỏ nhập liệu (caret) trong input/textarea	Hỗ trợ tốt
`resize`	Cho phép người dùng thay đổi kích thước phần tử: `none`, `both`, `horizontal`, `vertical`	Hỗ trợ tốt (cần overflow != visible)
`outline-offset`	Khoảng cách giữa outline và border	Hỗ trợ tốt
`nav-up/down/left/right`	Điều hướng focus bằng phím mũi tên (TV, kiosk, spatial navigation)	Deprecated / ít hỗ trợ

Ví dụ: appearance & box-sizing

<style>
  /* Biến div thành nút bấm native */
  .native-btn {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    padding: 8px 16px;
  }

  /* Box-sizing: border-box - width bao gồm padding + border */
  .box-border {
    width: 300px;
    padding: 20px;
    border: 5px solid #3498db;
    box-sizing: border-box; /* width thực = 300px */
  }

  /* Box-sizing: content-box (mặc định) - width chỉ là content */
  .box-content {
    width: 300px;
    padding: 20px;
    border: 5px solid #e74c3c;
    box-sizing: content-box; /* width thực = 350px */
  }
</style>

Thuộc tính đã lỗi thời / ít dùng

icon: Không được chuẩn hóa rộng rãi
nav-up, nav-down, nav-left, nav-right: Thay thế bởi spatial-navigation hoặc JS

Best Practice

Luôn dùng box-sizing: border-box toàn cục (CSS Reset)
Dùng appearance: none để reset style mặc định của form control trước khi custom
Kết hợp resize với overflow: auto cho textarea/diveditable