Làm thế nào để bạn chọn một nút radio trong CSS? HTML tôi đang làm việc với được tạo ra vì vậy tôi không thể thêm lớp hoặc các thuộc tính khác vào nó.Làm thế nào để bạn chọn một nút radio trong css?
Tôi tìm thấy đầu vào [type = "radio"] trên internet, nhưng tôi không biết đây có phải là CSS thông thường và được hỗ trợ bởi hầu hết các trình duyệt hay không.
Có cách nào khác để chọn nút radio không?
Cảm ơn bạn,
Brett
input[type="radio"] là một ví dụ về một attribute selector. Đó là một phần của thông số CSS3 và hoàn toàn hợp pháp. Trình duyệt duy nhất không hỗ trợ chúng là IE6. Nếu hỗ trợ IE6 là quan trọng đối với dự án, thì bạn nên xem xét thêm các lớp vào các nút radio đang được đề cập đến.
Here's an article với ví dụ về cách sử dụng bộ chọn thuộc tính hiệu quả. Hãy xem this article để biết thêm thông tin về các tiện ích CSS3.
Bộ chọn thuộc tính (input [type = "radio"]) là giải pháp đúng, hỗ trợ rộng rãi bởi tất cả mọi thứ nhưng IE6 :)
Nếu bạn không có khả năng sửa đổi HTML để bơm hỗ trợ classname (hoặc truy cập javascript để thực hiện việc này), sau đó các tùy chọn của bạn là:
A). để đảm bảo trang web của bạn không phụ thuộc vào điều này và cho phép IE6 giảm cấp độ một cách duyên dáng.
B). sống mà không có nó
Giải pháp của bạn là chính xác và sẽ hoạt động trong tất cả các trình duyệt hiện đại ngoài IE6. Đối với IE6 bạn sẽ phải tìm cách chọn chúng, sửa đổi HTML hoặc sử dụng Javascript.
Điều bạn đề cập ở trên là cách chính xác để nhắm mục tiêu theo CSS. Nó được gọi là attribute selector. Nó không được hỗ trợ bởi IE6 và dưới đây. Chúng có thể được mô phỏng bằng cách thêm một tập lệnh hành vi có điều kiện cho IE6. (Chỉ cần tìm kiếm trên google, tập tin kết thúc thường là .htc). Có lẽ cần lưu ý rằng các tệp .htc thường dẫn đến hiệu suất khủng khiếp và chỉ nên được sử dụng một cách tiết kiệm và được kiểm tra kỹ lưỡng để đảm bảo rằng hiệu suất đạt được chấp nhận được.
egad, .htc voodoo! Tốt suy nghĩ mặc dù trên các giải pháp alt. – annakata
bạn có thể sử dụng jQuery để chọn đầu vào và thêm lớp động.
Ví dụ (nguồn: http://docs.jquery.com/Attributes/addClass#class):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:last").addClass("selected highlight");
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
[Chỉnh sửa]
một thay thế cho jQuery là sử dụng http://code.google.com/p/ie7-js/
nó sửa chữa vô số vấn đề với nghĩa là các phiên bản thấp hơn 7 bản sửa lỗi mà bạn quan tâm nhất sẽ được minh họa tại đây:
Bạn có thể sử dụng jQuery để tìm tất cả các nút radio trên trang, sau đó thêm một số lớp CSS vào nó.
URL đầu tiên (liên kết) của bạn cũng tham chiếu là gì? – Brettski
Đó sẽ là tôi sao chép liên kết sai. Cảm ơn bạn cho người đứng đầu. –
Đây không phải là một goodie CSS3 - nó thực sự là một phần của CSS2. Vì vậy, IE6 không có lý do gì cho việc thiếu sự hỗ trợ của nó. –