html - 我可以使用 CSS 更改复选框的大小吗？

Question

是否可以跨浏览器使用 CSS 或 HTML 设置复选框的大小？

width 和 size 在 IE6+ 中有效，但不适用于 Firefox，即使我设置较小的尺寸，复选框也会保持 16x16。

Answer 1

它有点难看(由于扩大了规模)，但它适用于大多数较新的浏览器:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>