Áp dụng đường viền cho hộp kiểm trong Chrome

Question

Tôi có nhiều biểu mẫu trên trang web của mình, tất nhiên, nhiều trường trong số đó là bắt buộc. Nếu trường bắt buộc được để trống, nó được gán một lớp 'lỗi' và tôi đang cố gắng khoanh tròn trường màu đỏ bất kể đó là trường văn bản, menu thả xuống hay hộp kiểm. Tôi có đoạn code sau trong file css của tôi:

.error input, .error select, .error textarea { 
    border-style: solid; 
    border-color: #c00; 
    border-width: 2px; 
} 

Bây giờ lạ đủ để hoạt động tốt trong IE nhưng trong Chrome các hộp kiểm được không vòng tròn màu đỏ mặc dù tôi có thể thấy rằng CSS được áp dụng đối với họ khi kiểm tra việc thành phần.

Và điều này có thể không thích hợp vào mã css trên là tích cực nhưng tôi có cái gì khác trong file css của tôi:

input[type=checkbox] { 
    background:transparent; 
    border:0; 
    margin-top: 2px; 
} 

Và đó được sử dụng để các hộp kiểm được hiển thị một cách chính xác trong IE8 và ít hơn.

Bất kỳ ý tưởng nào về cách tôi có thể hình dung đường viền màu đỏ trong Chrome?

EDIT: Dưới đây là một jsfiddle: http://jsfiddle.net/PCD6f/3/

Answer 1

Chỉ cần làm điều đó như vậy (selectors bạn đã sai: .error đầu vào, .error chọn, .error textarea):

input[type=checkbox] { 
    outline: 2px solid #F00; 
} 

Đây là số jsFiddle

Cụ thể cho một số ch eckbox sử dụng outline: 2px solid #F00;, NHƯNG hãy nhớ rằng đường viền sẽ vẫn hiển thị. Tạo kiểu trường nhập để xem chúng tốt trên nhiều trình duyệt là khó khăn và không đáng tin cậy.

Để có hộp kiểm được tạo kiểu hoàn toàn tùy chỉnh, hãy xem này jsFiddle từ này Gist.

EDIT Chơi với: outline-offset: 10px;

Answer 2

Check Box, và Radio Button CSS Styling Border mà không cần bất kỳ hình ảnh hay nội dung. Chỉ là css thuần túy thôi.

JSFiddle Liên kết here

input[type="radio"]:checked:before { 
display: block; 
height: 0.4em; 
width: 0.4em; 
position: relative; 
left: 0.4em; 
top: 0.4em; 
background: #fff; 
border-radius: 100%; 
content: ''; 
} 

/* checkbox checked */ 
input[type="checkbox"]:checked:before { 
content: ''; 
display: block; 
width: 4px; 
height: 8px; 
border: solid #fff; 
border-width: 0 2px 2px 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
margin-left: 4px; 
margin-top: 1px; 
} 

Answer 3

trình cho đề cương me.only không hoạt động.

input[type=checkbox].has-error{ outline: 1px solid red !important; }