a

Câu hỏi Thay vào đó, nút radio trông giống như nút


Tôi muốn có một bộ nút radio cho một hình thức quyên góp, tuy nhiên tôi muốn chúng trông giống như các nút thay vì các vòng tròn vòng 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.

Đâ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


30
2018-04-26 18:30


gốc


Bạn đã thử tìm kiếm "nút radio tùy chỉnh" trên SO chưa? [ví dụ. stackoverflow.com/questions/9266868/… - Orbling
thử cái này jqueryui.com/button/#radio, điều này có thể ne những gì bạn đang tìm kiếm. - PSL
Có một số kỳ vọng nhất định mà người dùng có liên quan đến các nút, bạn có chắc đây là một điều khôn ngoan để làm không? - cimmanon
@cimmanon Vâng, tôi chắc chắn nếu bạn theo kiểu nó đúng, nó có thể được thực hiện khá rõ ràng cho người dùng rằng đây không phải là nút thông thường. Câu trả lời của tôi có lẽ KHÔNG làm điều này, nhưng tôi chỉ đơn giản là hiển thị một ví dụ cho anh ta để mở rộng. Điều đó đã được nói, quan điểm của bạn là một điều tốt để ghi nhớ. - VoidKing
Richard, Câu hỏi này là 3 tuổi. Bạn có thể đánh dấu câu trả lời là được chấp nhận không? @ PlantTheIdea của câu trả lời là rất tốt đẹp. - grokpot


Các câu trả lời:


Nó có thể được thực hiện với CSS và không cần một khung công tác lớn. Tôi đã làm điều này với các hộp kiểm và nút radio.

Điều này làm việc 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

Thứ 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>

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 hack mười phút, bạn có thể làm sạch nó hơn nữa, nhưng nó cho thấy một ví dụ điển hình về mức độ đơn giản của nó.


81
2018-04-26 18:41



Có, nhưng nó hoạt động trong IE8? - Richard
không ... nhưng bạn có thể tạo một lớp Checked chỉ cần chuyển đổi lớp nếu được chọn hay không trong javascript. giống như hai dòng javascript của nó, và chỉ cần thiết như một dự phòng, chứ không phải là chính. các + công cụ chọn hoạt động trở lại IE7. Tôi đã sửa đổi CSS để hiển thị cho bạn. - PlantTheIdea
Điều đó có thể hoạt động tốt. Cảm ơn vì điều này - Richard
Đừng cảm ơn tôi, cảm ơn dấu kiểm nếu điều này đã làm những gì bạn đang tìm kiếm! - PlantTheIdea
Điều này làm việc rất tốt cho những gì tôi cần. - Aldentec


CHỈNH SỬA:  đâ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 thuộc tính CSS xuất hiện:

XEM DEMO

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

7
2018-04-26 18:44



Điều này có vẻ tuyệt vời, nhưng làm cách nào để biết khi nào một mục được chọn? - Richard
Bạn có thể làm những gì bạn muốn, ví dụ: jsfiddle.net/YB8UW/10 - A. Wolff
Không may, appearance  không được hỗ trợ gì cả trong IE (và -ms-appearance tài sản bạn bao gồm ở đây không tồn tại), và hoàn toàn có thể sẽ không bao giờ có. Ngoài ra, appearance đã được giảm từ đặc tả CSS. Trừ khi bạn bằng cách nào đó biết rằng bạn đang nhắm mục tiêu chỉ các trình duyệt hỗ trợ thuộc tính - không áp dụng cho các nhà phát triển web thông thường viết trang web cho trang web công cộng - đây không phải là giải pháp thực tế hữu ích. - Mark Amery
@ MarkAmery Bạn là chính xác. Nhưng vào thời điểm tôi đưa ra câu trả lời này, appearance Thuộc tính CSS là đặc tả. Bây giờ, như bạn đã nói, điều này đã bị xóa (ngoại trừ hình như appearance: none;). - A. Wolff


HOẶC NẾU BẠN MUỐN LÀM THẾ NÀO NÀY ...

Những gì tôi sẽ làm là tạo các nút bằng <button> phần tử và phần tử trường biểu mẫu ẩn để nhớ yếu tố nào được "ép" như sau:

<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 để hiển thị rằng nút "được nhấn xuống" hoặc không "nhấn xuống" để bạn sẽ cầ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 JavaScript thẳng, vì vậy hãy ghi nhớ điều đó nếu bạn không 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ả những gì 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 thường sẽ cho biết "nút" mà họ đã nhấn.

Hãy thông báo rằng bạn sẽ cần phải thêm một chút chức năng để "unpress" các nút, nhưng tôi nghĩ rằng bạn có được điểm. Tất cả những gì bạn cần làm là đọc giá trị của #btnValue trên nhấp chuột và, cùng với các câu lệnh khác của bạn, hãy sử dụng một nhánh nếu để xử lý cho dù nó đã được nhấn hay chưa và chuyển đổi các đườ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 để bạn có thể cho biết liệu họ để lại cho họ tất cả các unpressed hay không).


1
2018-04-26 18:44



trong khi tôi nghĩ jquery / javascript là không cần thiết cho điều này, tôi đánh giá rất cao một người nào đó sẵn sàng cung cấp một câu trả lời DIY. - PlantTheIdea
Tôi luôn thử phương pháp DIY trước. Tôi ghét việc triển khai mã mà tôi không hiểu, trừ khi nó không thể phủ nhận là hành động tốt nhất. Ngoài ra, việc học các phương pháp DIY làm tăng số lượng công cụ trong "hộp công cụ lập trình viên" của bạn (nghĩa là bạn phát triển trải nghiệm và kỹ năng lập trình theo thời gian). Một thói quen tuyệt vời để tham gia IMO. - VoidKing
Cách tốt nhất là cố gắng hiểu bánh xe - A. Wolff
@roasted Ý nghĩa của nhận xét của bạn đã bị mất trên tôi. Ý bạn là gì, chính xác bằng cách, "Cách tốt nhất là cố gắng hiểu bánh xe". - VoidKing
Tôi chỉ có nghĩa là tuyệt vời của nó để DIY nhưng thường tốt hơn để xem xét đã được thực hiện plugin và hiểu những gì tác giả thực hiện. Tôi chắc chắn bạn biết, không sáng tạo lại bánh xe - A. Wolff


Rất tiếc, bạn không thể tạo kiểu nút radio trực tiếp trong bất kỳ trình duyệt nào. Cách để làm điều đó là sử dụng <label> các phần tử được đặt đúng for các thuộc tính, 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 <input> yếu tố vì IE8 sẽ không hỗ trợ pseudoclasses 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.


0
2018-04-26 18:33



Bạn thậm chí còn nhìn vào fiddle? Anh ta làm thế. - SeinopSys
Anh ta không che giấu các nút radio. Bạn không thể tạo kiểu cho chúng để bạn chỉ cần ẩn chúng. - nullability
visibility:hidden; khiến họ không thể nhấp được, bạn cần đặt opacity:0.01; để duy trì khả năng nhấp. xem câu trả lời của tôi để tham khảo. - PlantTheIdea
có nhãn cho rằng - A. Wolff
Nếu một nút radio được chọn, làm cách nào tôi có thể tạo kiểu cho nhãn để phản ánh điều đó? - Richard