Tạo kiểu cho các thành phần điều khiển biểu mẫu

Trong học phần này, bạn sẽ tìm hiểu cách tạo kiểu cho các thành phần điều khiển biểu mẫu và cách điều chỉnh cho phù hợp với các kiểu trang web khác.

Giúp người dùng chọn một chế độ

Phần tử <select>

Kiểu mặc định của phần tử <select> trông không đẹp và giao diện không nhất quán giữa các trình duyệt.

Trước tiên, hãy thay đổi các mũi tên. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Để xoá các mũi tên mặc định của phần tử <select>, hãy dùng thuộc tính appearance CSS. Để hiển thị mũi tên mà bạn chọn, hãy xác định mũi tên đó dưới dạng background.

Bạn cũng nên thay đổi font-size thành ít nhất 1rem (giá trị mặc định của hầu hết các trình duyệt là 16px) cho phần tử <select> của bạn. Làm như vậy sẽ ngăn thu phóng trang trên iOS Safari khi kiểm soát biểu mẫu được tập trung.

Tất nhiên, bạn cũng có thể thay đổi màu của thành phần cho phù hợp với màu sắc của thương hiệu. Sau khi thêm một số kiểu khác cho khoảng cách (:hover và :focus), giao diện của phần tử <select> hiện đã nhất quán giữa các trình duyệt.

Hãy xem nội dung này trong bản minh hoạ sau đây của Tạo kiểu cho một lựa chọn thích hợp năm 2019

Còn phần tử <option> thì sao? Phần tử <option> là một phần tử được thay thế có nội dung biểu diễn nằm ngoài phạm vi của CSS. Tại thời điểm viết bài này, bạn không thể tạo kiểu cho phần tử <option>.

Hộp đánh dấu và nút Chọn

Giao diện của <input type="checkbox"> và <input type="radio"> sẽ khác nhau trên các trình duyệt.

Mở bản minh hoạ trên nhiều trình duyệt để xem sự khác biệt. Hãy xem cách đảm bảo rằng các hộp đánh dấu và nút chọn khớp với thương hiệu của bạn và trông giống nhau trên nhiều trình duyệt.

Trước đây, nhà phát triển không thể trực tiếp tạo kiểu cho các chế độ điều khiển <input type="checkbox"> và <input type="radio">. Bạn hiện có thể tạo kiểu cho hộp đánh dấu và nút chọn thông qua các phần tử giả. Hoặc bạn có thể dùng kỹ thuật thay thế sau để tạo kiểu tuỳ chỉnh cho các phần tử này.

Trước tiên, hãy ẩn hộp đánh dấu mặc định và nút chọn một cách trực quan.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Bạn cần sử dụng position: absolute kết hợp với opacity: 0 thay vì display: none hoặc visibility: hidden để các chế độ điều khiển chỉ ẩn đi được hình ảnh. Điều này sẽ đảm bảo các trình duyệt này vẫn hiển thị qua cây hỗ trợ tiếp cận của trình duyệt. Xin lưu ý rằng bạn có thể cần tạo kiểu thêm để đảm bảo rằng các thành phần điều khiển biểu mẫu bị ẩn bằng hình ảnh vẫn được đặt "ở trên cùng" của các thành phần thay thế. Làm như vậy sẽ giúp đảm bảo rằng việc di chuột qua một trong các thành phần này, khi trình đọc màn hình đang bật hoặc khi sử dụng thiết bị cảm ứng có bật trình đọc màn hình, các nút điều khiển bị ẩn bằng hình ảnh sẽ có thể phát hiện được nếu bạn khám phá bằng cách chạm. Đồng thời, chỉ báo tiêu điểm hiển thị của trình đọc màn hình thường sẽ xuất hiện ở vị trí hiển thị các nút điều khiển trên màn hình.

Bạn có nhiều lựa chọn để hiển thị các hộp đánh dấu và nút chọn tuỳ chỉnh. Bạn có thể sử dụng phần tử giả CSS ::before và thuộc tính CSS background, hoặc sử dụng hình ảnh SVG cùng dòng. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Có rất nhiều khả năng với CSS để đảm bảo các hộp đánh dấu và nút chọn phù hợp với phong cách thương hiệu của bạn.

Tìm hiểu thêm về kiểu <input type="checkbox">, <input type="radio"> và kiểu hộp đánh dấu tuỳ chỉnh.

Cách sử dụng màu của trang web để kiểm soát biểu mẫu

Bạn có muốn đưa các kiểu trang web của mình vào bộ điều khiển biểu mẫu bằng một dòng mã không? Bạn có thể sử dụng thuộc tính CSS accent-color để làm việc này.

checkbox {
  accent-color: orange;
}

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về các thành phần kiểm soát định kiểu cho biểu mẫu

Làm cách nào để bạn xoá kiểu gốc của các chế độ điều khiển biểu mẫu?

Sử dụng revert: all;.
Hãy thử lại!
Sử dụng appearance: none;.
🎉
Sử dụng appearance: revert;.
Hãy thử lại!
Sử dụng revert: appearance;.
Hãy thử lại!

Tài nguyên