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

Trong mô-đun này, bạn sẽ tìm hiểu cách tạo kiểu cho các tùy chọn kiểm soát biểu mẫu và cách kết hợp 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> có giao diện không đẹp mắt và hình thức 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;
}

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

Bạn cũng nên thay đổi font-size thành ít nhất là 1rem (đối với hầu hết các trình duyệt, giá trị mặc định là 16px) cho phần tử <select>. Thao tác này sẽ ngăn việc thu phóng trang trên iOS Safari khi thành phần điều khiển biểu mẫu được đặt làm tiêu điểm.

Tất nhiên, bạn cũng có thể thay đổi màu của phần tử để 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 giãn 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 bản minh hoạ sau đây của Tạo kiểu cho sự kiện Select Like It’s 2019

Còn phần tử <option> thì sao? Phần tử <option> được gọi là phần tử được thay thế có đại diện nằm ngoài phạm vi 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 tuỳ theo trình duyệt.

Mở bản minh hoạ trên các trình duyệt khác nhau để xem sự khác biệt. Hãy cùng tìm hiểu cách đảm bảo rằng hộp đánh dấu và nút chọn trùng khớp với thương hiệu của bạn và có giao diện 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">. Hiện tại, bạ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ể sử dụng kỹ thuật thay thế sau đây để tạo kiểu tuỳ chỉnh cho các phần tử này.

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

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

Bạn phải sử dụng position: absolute kết hợp với opacity: 0 thay vì display: none hoặc visibility: hidden để các thành phần điều khiển chỉ có thể nhìn thấy được. Điều này đảm bảo các quảng cáo này vẫn được hiển thị bởi cây hỗ trợ tiếp cận. Lưu ý rằng bạn có thể cần phải tạo kiểu thêm để đảm bảo rằng hình ảnh các thành phần điều khiển biểu mẫu vẫn được đặt ở "trên cùng" các yếu tố thay thế của chúng. Việc này sẽ giúp đảm bảo rằng bạn di chuột lên một trong khi trình đọc màn hình được 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 điều khiển ẩn trực quan sẽ có thể phát hiện được nếu khám phá bằng cách chạm và chỉ báo lấy nét hiển thị của trình đọc màn hình thường sẽ xuất hiện ở vị trí mà các nút điều khiển hiển thị trên màn hình.

Bạn có nhiều lựa chọn để hiển thị hộp đánh dấu và nút chọn tuỳ chỉnh. Bạn sử dụng phần tử giả ::before CSS 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ó nhiều cách để CSS đảm bảo 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ề tạo kiểu <input type="checkbox"> và <input type="radio"> và kiểu hộp đánh dấu tuỳ chỉnh.

Cách sử dụng màu sắc trên trang web để kiểm soát biểu mẫu

Bạn có muốn đưa kiểu trang web của mình vào phần kiểm soát 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 điều khiển biểu mẫu tạo kiểu

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

Đang dùng revert: all;.
Hãy thử lại!
Đang dùng appearance: none;.
🎉
Đang dùng appearance: revert;.
Hãy thử lại!
Đang dùng revert: appearance;.
Hãy thử lại!

Tài nguyên