Mẹo nhỏ: Checkbox và Radio Button với CSS3

() translation by (you can also view the original English article)

Có bao giờ bạn tự hỏi làm thế nào để định phong cách cho checkbox và radio button mà không cần đến JavaScript không? Nhờ CSS3, bạn có thể làm điều đó! Dưới đây là những gì chúng ta sẽ xây dựng:

Nếu bạn đang tìm kiếm một số hình ảnh đồ họa để sử dụng với giao diện người dùng của bạn, hãy xem qua bộ kit giao diện người dùng có sẵn từ Envato Elements. Nếu không, hãy lấy một tách cà phê và bắt đầu cùng với hướng dẫn này!

1. Hiểu về tiến trình thực hiện

Nên đọc: 30 Bộ chọn CSS bạn cần phải ghi nhớ

Đối với những người cảm thấy tự tin vào khả năng CSS của bạn và chỉ muốn bắt đầu ngay, thì đây là dòng CSS quan trọng nhất trong toàn bộ hướng dẫn:

1	input[type="checkbox"]:checked + label {
2
3	}

Bây giờ, đối với những người cảm thấy có thể cần hướng dẫn thêm, hãy đọc tiếp!

Được rồi, quay trở lại chủ đề thôi. Chính xác là chúng ta sẽ làm gì? À, theo phần tử giả :checked của CSS3, chúng ta có thể chọn một phần tử dựa trên trạng thái tích chọn hay không được tích chọn. Chúng ta sau đó có thể sử dụng bộ chọn + từ CSS2.1 để chọn phần tử trực tiếp theo sau checkbox hoặc radio, mà trong trường hợp của chúng ta là label.

2. Thiết lập HTML của chúng ta

Bây giờ, chúng ta bắt đầu bằng cách tạo các tập tin HTML và CSS của chúng ta và bắt đầu làm việc. Tôi giả sử rằng bạn đã biết làm điều đó, vì vậy chúng ta không cần phải đi sâu vào nó.

Để giúp cho các bạn tự định hướng, tôi sẽ chỉ thực hiện kỹ thuật này trên một checkbox, nhưng quá trình cho radio button là tương tự, và được bao gồm trong mã nguồn.

Được rồi, chúng ta hãy bắt đầu thôi. Chúng ta bắt đầu bằng cách tạo ra các checkbox của chúng ta, theo sau là một label.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Bây giờ, trong trường hợp bạn không biết gì về phần tử <label>, bạn phải kết nối input và label để bạn tương tác với input thông qua label. Điều này được thực hiện bằng cách sử dụng for="" và ID của input.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Tôi cũng sẽ thêm một <span> bên trong label, điều này là tuỳ vào từng người, nhưng tất cả sẽ rõ trong bước 3.

3. Chúng ta ở đây là vì: CSS

Đây là nơi điều thú vị sẽ bắt đầu. Điều đầu tiên chúng ta làm, cũng là điều cơ bản cho toàn bộ hướng dẫn này, là ẩn checkbox thật sự.

1	input[type="checkbox"] {
2	display:none;
3	}

Bây giờ điều đó đã xong, chúng ta có thể định phong cách cho label, nhưng cụ thể hơn là span bên trong label. Tôi làm theo cách này để tôi kiểm soát tốt hơn vị trí của checkbox. Nếu không có nó bạn sẽ phải sử dụng một hình nền trực tiếp trong label, và việc định vị trí cho nó có thể trở nên khó khăn.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Được rồi, hãy để tôi giải thích điều này một cách nhanh gọn. Đầu tiên, lưu ý nền. Tôi có một sprite sheet cho những cái này, vì vậy tất cả những gì tôi phải làm là thiết lập vị trí của hình nền trên span này. Bản thân span có chiều rộng và chiều cao cụ thể của một "sprite" trong sheet, giúp dễ dàng xác định mỗi trạng thái.

Our sprite sheet — sprite sheet của chúng ta

Đây là CSS còn lại, cho việc định phong cách của riêng tôi. Điều này hoàn toàn cho nó đẹp và đặc biệt cho sở thích của tôi hay của thiết kế này.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Làm cho nó hoạt động

Không còn bao nhiêu việc phải làm cả, vì vậy hãy tổng hợp lại. Thứ cuối cùng bạn sẽ cần phải làm là cung cấp một trạng thái cho mỗi phần tử khi input được tích chọn, và có thể cho trạng thái di chuyển chuột lên trên. Điều này khá đơn giản, chỉ cần nhìn vào!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Lưu ý, bởi vì tôi sử dụng một sprite sheet, tất cả những gì tôi phải làm là thay đổi vị trí của hình nền. Đồng thời lưu ý, đó là tất cả những gì tôi phải làm để định phong cách cho span của label khi bạn "tích" vào một checkbox hoặc radio button, sử dụng phần tử giả :checked của CSS3.

Lưu ý nhanh về trình duyệt hỗ trợ

Phần tử giả được hỗ trợ tuyệt vời trên tất cả các trình duyệt, nhưng hãy cẩn thận khi áp dụng, và nên có một dự phòng:

Can I use data for pseudo selectors — Dữ liệu trên Can I Use cho các phần tử giả

IE9 on Windows 7 — Dự phòng: IE9 trên Windows 7

Những trình duyệt di động cũ có một vấn đề - hỗ trợ :checked là không rõ ràng. Mobile Safari pre iOS 6 không hỗ trợ nó, ví dụ.

Kết luận

Được rồi, vậy là chúng ta đã hoàn tất, đúng không? À hãy kiểm tra lại một lần nữa. Đầu tiên là HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Của bạn có giống như vậy không? Đừng quên thêm <span> vào nó! Khi thử nghiệm với điều này, tôi khuyên bạn hãy tìm kiếm những cách mới và khác đề làm điều này. Tôi rất thích nhìn thấy những gì bạn đưa ra để làm cho nó hiệu quả hơn. Bây giờ cho CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Tất cả mọi thứ đều đầy đủ chứ? Hoàn hảo. Hãy nhớ rằng rất nhiều phong cách này là của riêng tôi tạo ra cho các tập tin demo. Tôi khuyến khích bạn tạo của riêng bạn, và thử nghiệm với sắp đặt và trình bày.

Trong phần kết luận, điều quan trọng nhất bạn có thể mang ra khỏi đây là dòng đầu tiên của CSS mà tôi đã viết ở lúc đầu:

1	input[type="checkbox"]:checked + label {
2
3	}

Sử dụng đó, bạn có thể tạo ra một kiểu hoàn toàn khác nhau. Những khả năng với :checked đi vượt ra ngoài checkbox và radio để sử dụng trong form, nhưng tôi sẽ để lại cho bạn thử nghiệm với điều đó cho riêng bạn. Một số thứ để thử nghiệm:

Thêm spritesheet 2x cho màn hình retina
Sử dụng SVG thay vì bitmap

Tôi hy vọng bạn thích bài viết ngắn này và tôi hy vọng bạn lấy những gì bạn nhìn thấy ở đây và mở rộng hoặc cải tiến nó!