Có bao giờ bạn tự hỏi làm thế nào để định cách cho hộp kiểm và nút radio mà không cần đến JavaScript không? . Dưới đây là những gì chúng tôi sẽ xây dựng Show 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ộ giao diện người dùng có sẵn từ Envato Elements. Nếu không, hãy lấy một tập tin tách cà phê và bắt đầu cùng theo hướng dẫn này  1. Hiểu về quá trình thực thiRead more. 30 CSS Selector you must write memory Đố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 input[type="checkbox"]:checked + label {
}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ì? . Chúng ta sau đó có thể sử dụng bộ lựa chọn <input type="checkbox" /> <label>Styled Check Box</label>1 từ CSS2. 1 để chọn phần tử trực tiếp theo hộp kiểm hoặc đài phát thanh, mà trong trường hợp của chúng ta là nhãn 2. Thiết lập HTML của chúng taBâ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 các bạn định hướng tự động, tôi sẽ chỉ thực hiện kỹ thuật này trên một hộp kiểm, nhưng quá trình cho nút radio 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 hộp kiểm của chúng ta, theo sau là một nhãn <input type="checkbox" /> <label>Styled Check Box</label> Bây giờ, trong trường hợp bạn không biết gì về phần tử <input type="checkbox" /> <label>Styled Check Box</label>2, bạn phải kết nối đầu vào và nhãn để tương tác với thông tin đầu vào thông qua nhãn. Điều này được thực hiện bằng cách sử dụng <input type="checkbox" /> <label>Styled Check Box</label>3 và ID của đầu vào <input type="checkbox" id="c1" name="cc" /> <label for="c1">Check Box 1</label> Tôi cũng sẽ thêm một <input type="checkbox" /> <label>Styled Check Box</label>4 bên trong nhãn, điều này tùy vào từng người, nhưng tất cả sẽ rõ ở 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 hộp kiểm thật sự ________số 8Bây giờ điều đó đã hoàn thành, chúng ta có thể định phong cách cho nhãn, nhưng cụ thể hơn là khoảng bên trong nhãn. Tôi làm theo cách này để tôi kiểm tra tốt hơn vị trí của hộp kiểm. 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 nhãn, và xác định vị trí để 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 chóng. Đầ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 màn 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 trang tính, giúp dễ dàng xác định từng trạng thái This is CSS left, for the style of my own. Điều này hoàn toàn phù hợp với sở thích của tôi hay của thiết kế này <input type="checkbox" /> <label>Styled Check Box</label>0 4. Làm cho nó hoạt độngKhông còn bao nhiêu công việc phải làm cả, vì vậy hãy tổng hợp lại. Cuối cùng, bạn cần phải làm là cung cấp một trạng thái cho mỗi phần tử khi đầu vào được chọn và có thể chọn 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" /> <label>Styled Check Box</label>1 Lưu ý, bởi vì tôi sử dụng một trang tính ma, 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 khoảng thời gian của nhãn khi bạn "tích" vào hộp kiểm hoặc nút radio, sử dụng phần tử giả mạo <input type="checkbox" /> <label>Styled Check Box</label>0 của CSS3 Lưu ý nhanh về trình hỗ trợ duyệtPhần mềm 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 phòng dự kiến Các trình duyệt di động cũ có một vấn đề - Hỗ trợ <input type="checkbox" /> <label>Styled Check Box</label>0 không rõ ràng. Mobile Safari trước 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? . Đầu tiên là HTML <input type="checkbox" /> <label>Styled Check Box</label>4 Your you are same as so not? . Khi thử nghiệm với điều này, tôi khuyên bạn nên tìm kiếm những cách mới và các chủ đề 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" /> <label>Styled Check Box</label>1 Tất cả mọi thứ đều đầy đủ chứ? . 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 ra của riêng bạn, và thử nghiệm sắp đặt và trình bày Trong phần kết luận, điều quan trọng nhất mà bạn có thể đưa ra khỏi đây là dòng đầu tiên của CSS mà tôi đã viết ở đầu input[type="checkbox"]:checked + label {
}Sử dụng nó, bạn có thể tạo ra một kiểu hoàn toàn khác. Những khả năng với hộp kiểm và đài phát thanh bên ngoài của <input type="checkbox" /> <label>Styled Check Box</label>0 để sử dụng trong biểu mẫu, nhưng tôi sẽ để lại cho bạn thử nghiệm với điều đó cho riêng bạn. A number to try
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 thấy ở đây và mở rộng tầm nhìn hoặc cải tiến nó |
