Làm cho các nút radio trông giống như các nút thay vì

Question

Tôi muốn có một bộ nút radio cho biểu mẫu đóng góp, tuy nhiên tôi muốn chúng trông giống như các nút thay vì các mặt đồng hồ tròn.

Cách tiếp cận tốt nhất để làm điều gì đó như thế? Ngoài ra, hãy nhớ, nó phải làm việc với IE8.

Dưới đây là những gì tôi có cho đến nay, http://jsfiddle.net/YB8UW/

.donate-now { 
    list-style-type:none; 
    margin:25px 0 0 0; 
    padding:0; 
} 

.donate-now li { 
    float:left; 
    margin:0 5px 0 0; 
} 

.donate-now label { 
    padding:5px; 
    border:1px solid #CCC; 
    cursor:pointer; 
} 

.donate-now label:hover { 
    background:#DDD; 
} 

Cảm ơn bạn

Answer 1

Đừng nghe những người nói rằng không thể thực hiện được với CSS, hoặc tệ hơn là đề xuất một số khung lớn. Tôi làm điều này tất cả các thời gian với các hộp kiểm tra và các nút radio.

Tính năng này hoạt động mà không cần thêm HTML mới hoặc đưa vào bất kỳ thư viện JS nào. =>jsFiddle

CÁC TRÌNH TỰ MỚI CỦA HTML

<ul class="donate-now"> 
<li> 
    <input type="radio" id="a25" name="amount" /> 
    <label for="a25">$25</label> 
</li> 
<li> 
    <input type="radio" id="a50" name="amount" /> 
    <label for="a50">$50</label> 
</li> 
<li> 
    <input type="radio" id="a75" name="amount" checked="checked" /> 
    <label for="a75">$75</label> 
</li> 
<li> 
    <input type="radio" id="a100" name="amount" /> 
    <label for="a100">$100</label> 
</li> 
<li> 
    <input type="radio" id="other" name="amount" /> 
    <label for="other">other:</label> 
</li> 
<li> 
    <input type="text" id="otherAmount" name="numAmount" /> 
</li> 
</ul> 

THE CSS

.donate-now { 
    list-style-type:none; 
    margin:25px 0 0 0; 
    padding:0; 
} 

.donate-now li { 
    float:left; 
    margin:0 5px 0 0; 
    width:100px; 
    height:40px; 
    position:relative; 
} 

.donate-now label, .donate-now input { 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

.donate-now input[type="radio"] { 
    opacity:0.01; 
    z-index:100; 
} 

.donate-now input[type="radio"]:checked + label, 
.Checked + label { 
    background:yellow; 
} 

.donate-now label { 
    padding:5px; 
    border:1px solid #CCC; 
    cursor:pointer; 
    z-index:90; 
} 

.donate-now label:hover { 
    background:#DDD; 
} 

Đây là phiên bản mười phút hacky, bạn có thể làm sạch nó lên hơn nữa, nhưng nó cho thấy một ví dụ điển hình về sự đơn giản của nó.

Answer 2

Đáng tiếc là bạn không thể nút radio phong cách trực tiếp trong bất kỳ trình duyệt. Cách để thực hiện việc này là sử dụng các phần tử <label> với các thuộc tính được đặt chính xác for, sau đó ẩn nút radio bằng cách sử dụng visibility: hidden thay vì display: none. Sau đó, bạn có thể định vị các nhãn bất cứ nơi nào bạn muốn và chúng sẽ hoạt động như các nút radio. Bạn sẽ cần một chút javascript để kiểm soát kiểu dáng của các nhãn dựa trên trạng thái của phần tử <input> vì IE8 sẽ không hỗ trợ lớp giả CSS nâng cao như :checked.

Đó là một chút của một hack nhưng nó là cách duy nhất để sử dụng nút radio bản địa với đồ họa tùy chỉnh và vẫn duy trì khả năng tiếp cận.

Answer 3

EDIT:đây không phải là giải pháp nếu bạn cần hỗ trợ trình duyệt IE.

---

Bạn có thể sử dụng tài sản xuất hiện CSS:

SEE DEMO

-webkit-appearance: button; /* WebKit */ 
-moz-appearance: button; /* Mozilla */ 
-o-appearance: button; /* Opera */ 
-ms-appearance: button; /* Internet Explorer */ 
appearance: button; /* CSS3 */ 

Answer 4

HOẶC NẾU BẠN MUỐN LÀM THẾ CHÍNH BẠN ...

gì tôi sẽ làm sẽ là để tạo ra các nút với <button> yếu tố và yếu tố trường biểu mẫu ẩn nhớ cái nào là "ép" như vậy:

<button type="button" id="btn1">Choice 1</button> 
<button type="button" id="btn2">Choice 2</button> 
<button type="button" id="btn3">Choice 3</button> 
<input type="hidden" id="btnValue" value="" /> 

Bạn sẽ CSS để chứng minh rằng các nút được "ép xuống" hay không "ép xuống", do đó bạn sẽ cần đến chúng theo mặc định là một cái gì đó như thế này:

button 
{ 
    border-width: 2px; 
    border-style: outset; 
    border-color: /*Insert a darker version of your button color here*/ 
} 

Sau đó, trong jQuery (nếu bạn có thể làm điều đó trong jQuery, bạn có thể làm điều đó trong thẳng JavaScript, vì vậy hãy ghi nhớ điều đó nếu bạn muốn on't muốn sử dụng jQuery):

$("#btn1").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn2").css("border-style", "outset;"); 
    $("#btn3").css("border-style", "outset;"); 
    $("btnValue").val("btn1IsPressed"); 
}); 
$("#btn2").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn1").css("border-style", "outset;"); 
    $("#btn3").css("border-style", "outset;"); 
    $("btnValue").val("btn2IsPressed"); 
}); 
$("#btn3").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn1").css("border-style", "outset;"); 
    $("#btn2").css("border-style", "outset;"); 
    $("btnValue").val("btn3IsPressed"); 
}); 

Bây giờ tất cả các bạn cần làm là yêu cầu giá trị từ #btnValue sau khi POST (hoặc GET hoặc bất cứ điều gì), giống như bạn bình thường để cho các "nút", họ có ép.

Hãy thông báo rằng bạn sẽ cần thêm một chút chức năng nữa để "bỏ chọn" các nút, nhưng tôi nghĩ bạn sẽ có được điểm. Tất cả những gì bạn cần làm là đọc giá trị của #btnValue khi nhấp và, cùng với các câu lệnh khác của bạn, sử dụng chi nhánh nếu xử lý cho dù nó đã được nhấn hay chưa và chuyển đổi đường viền tương ứng (đừng quên xóa ("") giá trị của #btnValue trên "unpressing" của một nút, do đó bạn có thể nói cho dù họ để lại cho họ tất cả các unpressed hay không).