Hộp kiểm trong trang web - làm thế nào để làm cho chúng lớn hơn?

Các hộp kiểm chuẩn được hiển thị trong hầu hết các trình duyệt đều khá nhỏ và không tăng kích thước ngay cả khi sử dụng phông chữ lớn hơn. Cách tốt nhất, không phụ thuộc vào trình duyệt để hiển thị các hộp kiểm lớn hơn là gì?

Trong trường hợp điều này có thể giúp ích cho bất kỳ ai, đây là CSS đơn giản như một điểm khởi đầu. Biến nó thành một hình vuông tròn cơ bản đủ lớn cho ngón tay cái với màu nền được bật tắt.

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

<input type="checkbox" />

Trên thực tế, có một cách để làm cho chúng lớn hơn, hộp kiểm giống như bất kỳ thứ gì khác (thậm chí là một khung nội tuyến như nút facebook).

Bao bọc chúng trong một phần tử "đã thu phóng":

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

Nó có thể trông hơi "thay đổi tỷ lệ" nhưng nó hoạt động.

Tất nhiên, bạn có thể làm cho div float: left và đặt nhãn của bạn bên cạnh nó, float: left.

Hãy thử CSS này

input[type=checkbox] {width:100px; height:100px;}

Tôi đã thử thay đổi dấu paddingvà marginvà cũng như widthvà heightvà cuối cùng nhận thấy rằng nếu bạn chỉ tăng quy mô thì nó sẽ hoạt động:

input[type=checkbox] {
    transform: scale(1.5);
}

Đây là một thủ thuật hoạt động trong hầu hết các trình duyệt gần đây (IE9 +) như một giải pháp CSS duy nhất có thể được cải thiện với javascript để hỗ trợ IE8 trở xuống.

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

Tạo kiểu labelvới những gì bạn muốn hộp kiểm trông như thế nào

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

Đối với javascript, bạn sẽ có thể thêm các lớp vào nhãn để hiển thị trạng thái. Ngoài ra, sẽ là khôn ngoan nếu sử dụng hàm sau:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

CHỈNH SỬA để sửa đổi #checkboxIDkiểu

Tôi đang viết một ứng dụng phonegap và các hộp kiểm khác nhau về kích thước, giao diện, v.v. Vì vậy, tôi đã tạo hộp kiểm đơn giản của riêng mình:

Đầu tiên, mã HTML:

<span role="checkbox"/>

Sau đó, CSS:

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

Để chuyển đổi trạng thái hộp kiểm, tôi đã sử dụng JQuery:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

Nhưng nó có thể dễ dàng được thực hiện mà không cần ...

Hy vọng nó có thể giúp đỡ!

Chỉ quyết định CSS 2020 hiện đại thuần túy , không chia tỷ lệ mờ hoặc chuyển đổi không tiện dụng. Và với đánh dấu! =)

Hoạt động tốt trên Firefox và các trình duyệt dựa trên Chromium.

Vì vậy, bạn có thể quy tắc các hộp kiểm của mình hoàn toàn là ADAPTIVE , chỉ bằng cách thiết lập khối chính font-heightvà nó sẽ phát triển theo văn bản!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}

<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>