CHROME html radio tới hộp kiểm hiển thị dấu trừ

Question

Nếu bạn xem mã này bằng chrome, các hộp kiểm chưa được chọn hiển thị dưới dạng dấu gạch ngang, chúng phải trống, tại sao lại là dấu này?

HTML

<form> 
<input type="radio" name="sex" value="male" >Red 
<br> 
<input type="radio" name="sex" value="female">Blue 
<br> 
<input type="radio" name="sex" value="female">Orange 
<br> 
<input type="radio" name="sex" value="female">Green 
</form> 

CSS

input[type="RADIO"] { 
    -webkit-appearance: checkbox; 
} 

JSFIDDLE

Answer 1

Các hành vi bạn đang nhìn thấy là phù hợp với các thông số kỹ thuật. Hành vi này đang được theo dõi từ đặc tả tính năng Hệ thống xuất hiện năm 2004 trên diện mạo hệ thống.

Điều này là do checkbox có thể có trạng thái indeterminate chỉ trực quan và do đó không được kiểm soát qua CSS nhưng có thể được điều khiển thông qua Javascript. Bây giờ, đối với một nhóm radio, chỉ một người có thể được kiểm tra bất cứ lúc nào. Khi một đài phát thanh được chọn, những người khác sẽ không được chọn. Cho đến khi điều đó xảy ra, nếu trạng thái ban đầu không được đánh dấu trong đánh dấu, thì trạng thái của chúng là indeterminate.

Xem fiddle này: http://jsfiddle.net/abhitalks/yp5551Lq/1/

Bạn có thể nhận thấy rằng một input[type=checkbox] có thể có một trạng thái indeterminate đó được thể hiện trực quan bằng một dash. Nhân tiện, chỉ có webkit trình duyệt dựa trên dường như hỗ trợ nó. Firefox và IE dường như bỏ qua thuộc tính appearance.

Chú ý: Đối radio kiểu như checkbox, điều này có thể không được thao tác thông qua Javascript. Điều này là do, đối với radio s ít nhất một người được cho là checked. Trừ khi, điều đó xảy ra nó sẽ được tạo kiểu là indeterminate. Giải pháp duy nhất cho bạn là đặt thuộc tính checked trên một trong các radio. Ngoài ra, bạn có thể có thêm một đài phát thanh ẩn trong cùng một nhóm với thuộc tính checked được thiết lập ban đầu.

đặc tả này được lưu trữ ở đây: http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance và Ref Nguồn: https://wiki.csswg.org/spec/css4-ui#appearance

Các spec nói:

... một nút hiển thị hay không nó được kiểm tra với một hộp nhỏ tiếp theo vào nhãn nút. Có thể có dấu 'x' hoặc dấu kiểm bên trong hộp khi nút được chọn. Trạng thái không xác định (không được chọn cũng không được bỏ chọn) có thể được chỉ báo bằng dấu gạch ngang '-' hoặc hình vuông hoặc một số đồ họa khác trong hộp.

Do đó, webkit trình duyệt dựa trên sử dụng trạng thái dash để chỉ trạng thái indeterminate.

Snippet:

var checkbox = document.getElementById("x"); 
 
checkbox.indeterminate = true;

input { 
 
    display: inline-block; 
 
    width: 24px; height: 24px; 
 
} 
 
input[type="radio"] { 
 
    -webkit-appearance: checkbox; 
 
}

<input type="radio" name="sex" value="male" >Radio 1<br> 
 
<input type="radio" name="sex" value="female">Radio 2<br> 
 
<input type="radio" name="sex" value="female">Radio 3<br> 
 
<input type="checkbox" id="y" name="y">Checkbox 1<br> 
 
<input type="checkbox" id="x" name="x">Checkbox 2<br>

Xin lưu ý rằng điều thú vị, appearance đang được giảm từ CSS 4 thông số kỹ thuật!

Answer 2

Đối với điều này để thay đổi, bạn phải chọn một đầu vào đài phát thanh mặc định.
Ở đây tôi chọn đầu vào đầu tiên:

<form> 
<input type="radio" name="sex" value="male" checked="checked" >Red 
<br> 
<input type="radio" name="sex" value="female">Blue 
<br> 
<input type="radio" name="sex" value="female">Orange 
<br> 
<input type="radio" name="sex" value="female">Green 
</form> 

Answer 3

Bạn có thể thêm một nút radio ẩn và kiểm tra nó

<label><input type="radio" name="sex" value="1" >Male</label> 
<label><input type="radio" name="sex" value="2">Female</label> 
<input style="display: none;" type="radio" name="sex" value="0" checked>