Kiểu dáng hộp kiểm CSS

Bất kỳ phong cách cho inputảnh hưởng đến mọi yếu tố đầu vào. Có cách nào để chỉ định kiểu dáng để chỉ áp dụng cho các hộp kiểm mà không áp dụng một lớp cho mỗi thành phần hộp kiểm không?

Với CSS 2, bạn có thể làm điều này:

input[type='checkbox'] { ... }

Điều này nên được hỗ trợ khá rộng rãi ngay bây giờ. Xem hỗ trợ cho trình duyệt

Tôi tạo ra giải pháp của riêng tôi mà không có nhãn

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Một cái gì đó tôi mới phát hiện ra để tạo kiểu Nút Radio VÀ Hộp kiểm. Trước đây, tôi phải sử dụng jQuery và những thứ khác. Nhưng điều này là đơn giản ngu ngốc.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Bạn có thể làm tương tự cho một hộp kiểm, rõ ràng thay đổi input[type=radio]thành input[type=checkbox]và thay đổi border-radius:15px;thành border-radius:4px;.

Hy vọng điều này là một phần hữu ích cho bạn.

Các lớp học cũng hoạt động tốt, chẳng hạn như:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Bạn chỉ có thể áp dụng cho một số thuộc tính nhất định bằng cách thực hiện:

input[type="checkbox"] {...}

Nó giải thích nó ở đây .

input[type="checkbox"] {
 /* your style */
}

Nhưng điều này sẽ chỉ hoạt động cho các trình duyệt trừ IE7 trở xuống, đối với những người bạn sẽ phải sử dụng một lớp.

Trident cung cấp ::-ms-checkphần tử giả cho hộp điều khiển và nút điều khiển nút radio. Ví dụ:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Điều này sẽ hiển thị như sau trong IE10 trên Windows 8:

Vì IE6 không hiểu các bộ chọn thuộc tính, bạn có thể kết hợp một tập lệnh chỉ được thấy bởi IE6 (với các nhận xét có điều kiện) và jQuery hoặc IE7.js của Dean Edwards.

IE7 (.js) là một thư viện JavaScript để làm cho Microsoft Internet Explorer hoạt động giống như một trình duyệt tuân thủ tiêu chuẩn. Nó sửa nhiều vấn đề HTML và CSS và làm cho PNG trong suốt hoạt động chính xác trong IE5 và IE6.

Việc lựa chọn sử dụng các lớp hoặc jQuery hoặc IE7.js tùy thuộc vào sở thích và không thích của bạn và các nhu cầu khác của bạn (có thể là độ trong suốt PNG-24 trên trang web của bạn mà không phải dựa vào PNG-8 với độ trong suốt hoàn toàn giảm xuống độ trong suốt 1 bit trên IE6 - chỉ được tạo bởi Pháo hoa và pngnq, v.v.)

Mặc dù CSS cung cấp một cách để bạn thực hiện kiểu cụ thể cho loại hộp kiểm hoặc loại khác, nhưng sẽ có vấn đề với các trình duyệt không hỗ trợ điều này.

Tôi nghĩ rằng lựa chọn duy nhất của bạn trong trường hợp này là áp dụng các lớp cho các hộp kiểm của bạn.

chỉ cần thêm lớp = "hộp kiểm" vào hộp kiểm của bạn.

Sau đó tạo phong cách đó trong mã css của bạn.

Một điều bạn có thể làm là:

main.css

input[type="checkbox"] { /* css code here */ }

tức là

.checkbox{ /* css code here for ie */ }

Sau đó sử dụng css cụ thể của IE bao gồm:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Bạn vẫn sẽ cần thêm lớp để nó hoạt động trong IE và nó sẽ không hoạt động trong các trình duyệt không phải IE khác không hỗ trợ IE. Nhưng nó sẽ làm cho trang web của bạn phải suy nghĩ về phía trước với mã css và khi IE được hỗ trợ, bạn sẽ có thể xóa mã css cụ thể và cả các lớp css khỏi các hộp kiểm.