Đặt đường viền css quanh các nút radio

Question

Tôi đang cố gắng để có được đường viền màu đỏ sặc sỡ xung quanh một số nút radio, nhưng nó không hiển thị trong Firefox mới nhất hoặc Chrome mới nhất. Làm việc tốt trong IE9/IE8.

Mỗi phần tử đầu vào trên biểu mẫu của tôi bắt buộc phải có thuộc tính data-val-required được đặt bởi MVC3. Tất cả các trình duyệt đặt trong biên giới màu đỏ chỉ dandy khi chúng tôi có một văn bản hoặc đầu vào văn bản, nhưng đang đấu tranh với các nút radio. Đối với IE, nó hoạt động, nhưng các trình duyệt khác sẽ không đặt đường viền màu đỏ xung quanh nó.

css:

input[data-val-required], select[data-val-required], textarea[data-val-required] 
{ 
    background-color: #F0FFFF; 
    border: 1px solid red; 
} 

view-source:

<label for="WaiveSelect">Do you waive confidentiality?</label><br /> 
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br /> 
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br /> 
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br /> 
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span> 

gì nó trông giống như trong IE (Firefox và Chrome sẽ hiển thị không biên giới):

Answer 1

Bạn có thể thực hiện bằng cách gói mỗi < input type = "radio" /> với < div> thẻ và cung cấp cho nó một biên giới và một phao trái ... như thế này

<div style="border:1px solid red;float:left"> 
    <input type="radio".. /> 
</div> 
No, I do not waive confidentiality 

Answer 2

Không phải tất cả các trình duyệt hỗ trợ biên giới xung quanh nút radio và hộp kiểm. Tôi đã bỏ phiếu cho một lỗi năm trước để có điều này bao gồm trong Gecko nhưng cho đến nay họ đã không thực hiện nó.

Answer 3

hãy thử http://jsfiddle.net/rp9HJ/1/ này. nó có thể giúp bạn.

Answer 4

input[type=radio]{ 
    outline: 1px solid red 
} 

Answer 5

Toàn bộ mã sử dụng jquery

https://jsfiddle.net/xcb26Lzx/

$(function(){ 
     $('.layer').css('border',0); 
    $('input:radio').change(
    function(){ 
     if ($(this).is(':checked')) { 
      $('.layer').css('border','1px solid red'); 
     } 
    }); 
}); 

Answer 6

Hãy thử này ...

Đặt một div xung quanh đầu vào và gán một lớp học để các div như vậy:

<div class="custom"><input type="radio"></div> 

Sau đó, mở tệp css tùy chỉnh của bạn và thêm CSS này

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;} 

Điều này sẽ tạo đường viền màu đỏ đẹp mắt quanh nút radio. Nếu bạn đang sử dụng một hộp kiểm, bạn chỉ cần loại bỏ bán kính đường viền: 30px từ css. Tùy thuộc bạn có thể cần phải chơi với padding một chút để trung tâm nút, nhưng điều này làm việc cho tôi.

Chỉnh sửa: Bạn cũng sẽ muốn chỉ định CSS sau cho div để nó xếp hàng chính xác.

.custom {display: inline;} 

fiddle link

Answer 7

Tôi biết đây là bốn tuổi, nhưng tôi đã đưa ra một giải pháp tốt đẹp sử dụng các yếu tố CSS Pseudo.

Yêu cầu của tôi là đánh dấu hộp kiểm không được chọn hoặc nút radio khi xác thực.

<input type="radio" class="required" name="radio1"/> 

/* Radio button and Checkbox .required needs an after to show */ 
input[type=radio].required::after, input[type=checkbox].required::after { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    content: ''; 
    border: 2px solid red !important; 
    box-sizing: border-box; 
} 
/* Radio buttons are round, so add 100% border radius. */ 
input[type=radio].required::after { 
    border-radius:100%; 
}