Tạo giao diện cho giao diện người dùng do trình duyệt tạo

Hầu hết giao diện người dùng do trình duyệt tạo đều có thể tuỳ chỉnh ở một mức độ nào đó bằng CSS. Ngay cả khi cần các tính năng hiện đại, ứng dụng vẫn xuống cấp nhẹ trong các trình duyệt cũ và do đó thường không cần polyfill hoặc dự phòng.

Trước khi tạo lại giao diện người dùng của trình duyệt (các thành phần điều khiển biểu mẫu, thanh cuộn, lựa chọn, thông báo lỗi, v.v.), trước tiên, hãy xác minh rằng:

1. giao diện người dùng của trình duyệt không thể tuỳ chỉnh đủ cho nhu cầu của bạn, ngay cả khi sử dụng CSS hiện đại,
2. tuỳ chỉnh mong muốn đủ quan trọng để đánh đổi việc tạo lại giao diện người dùng tích hợp sẵn — đáng chú ý nhất là mất ngữ nghĩa hỗ trợ tiếp cận, xử lý bàn phím, IME và tích hợp AT mà giao diện người dùng gốc cung cấp miễn phí.

Ví dụ về các tuỳ chỉnh có thể thực hiện:

• Sử dụng ::selection để tuỳ chỉnh màu văn bản được đánh dấu.
• KHÔNG áp dụng user-select: none cho văn bản nội dung — làm hỏng các công cụ sao chép-dán, dịch và cử chỉ "đọc từ đây" của công nghệ hỗ trợ. Hạn chế sử dụng chrome (tay điều khiển kéo, thanh công cụ, nhãn nút thừa).
• Sử dụng accent-color để áp dụng màu nhấn của trang cho mọi giao diện người dùng do trình duyệt tạo.
• Sử dụng color-scheme để giao diện người dùng của trình duyệt thích ứng với chế độ sáng/tối.
• Sử dụng scrollbar-color để tuỳ chỉnh màu thanh cuộn và scrollbar-width để kiểm soát độ dày của thanh cuộn – đảm bảo thanh trượt khác biệt rõ ràng với rãnh (≥3:1) và không đặt scrollbar-width: none trên các vùng có thể cuộn (chỉ sử dụng khi thao tác cuộn được thay thế hoàn toàn bằng một chức năng khác).
• Sử dụng :user-invalid/:user-valid để tạo kiểu cho tính hợp lệ, không :invalid/:valid – các kiểu này chỉ khớp sau khi người dùng tương tác với trường, tránh mặc định không thân thiện là gắn cờ các trường bắt buộc trống là lỗi khi tải trang. Loại trừ thanh trượt phạm vi khi nhắm mục tiêu input trên diện rộng (ví dụ: input:not(input[type="range"]):user-valid) để việc điều chỉnh thanh trượt không áp dụng đường viền hoặc nền hợp lệ của trường cho thanh trượt đó.
• Nút và trường văn bản (bao gồm cả <textarea>) thường có thể được tạo kiểu như các phần tử thông thường.
• Sử dụng font-size để điều chỉnh tỷ lệ và các thuộc tính văn bản khác để kiểm soát kiểu chữ

Tạo kiểu cho các trường văn bản (<input> và <textarea>)

Đối với hầu hết các mục đích tạo kiểu (ví dụ: màu sắc, đường viền, nền, kiểu chữ, v.v.), hãy coi các phần tử này là vùng chứa văn bản thông thường.

• Sử dụng :placeholder-shown và ::placeholder để tạo kiểu cho phần giữ chỗ nhập dữ liệu.
• Sử dụng field-sizing: content để đặt kích thước trường văn bản theo nội dung.
• Đối với các phần tử <textarea>, hãy sử dụng resize: vertical để tắt tính năng đổi kích thước theo chiều ngang hoặc resize: none để tắt tất cả tính năng đổi kích thước.

Các thành phần điều khiển trắc nghiệm (chọn, nút chọn, hộp đánh dấu)

• Để chọn một trong nhiều lựa chọn trong trình đơn thả xuống: Hãy dùng <select> + appearance: base-select + ::picker(select). Để biết thêm thông tin, hãy xem phần Kiểu chọn lọc có thương hiệu
• Chọn một hoặc nhiều lựa chọn trong số nhiều lựa chọn được trình bày cùng dòng trên trang: Sử dụng <input type=checkbox> hoặc <input type=radio> bên trong <label> cho mỗi lựa chọn. Tạo kiểu thông qua label:has(:checked).
• Tạo kiểu cho hộp đánh dấu, nút chọn và nút chuyển thông qua appearance: none + nội dung được tạo (::before/::after) hoặc hình nền để vẽ trạng thái đã chọn.

<input> không phải văn bản (nút, thanh trượt, dữ liệu đầu vào của tệp, v.v.)

• Đầu vào tệp: Sử dụng ::file-selector-button để tạo kiểu cho nút.
• Không sử dụng <input> với type của button, submit hoặc reset. Thay vào đó, hãy sử dụng <button> và tạo kiểu cho phần tử này như một phần tử thông thường.
• Thanh trượt: Sử dụng phần tử giả appearance: none + thumb (::-webkit-slider-thumb, ::-moz-range-thumb, v.v.) và phần tử giả track (::-webkit-slider-runnable-track, ::-moz-range-track, v.v.) để kiểm soát chi tiết hơn.