CSS를 사용하여 체크박스 크기를 변경하는 방법

질문 : CSS를 사용하여 확인란 크기를 변경할 수 있습니까?

---

브라우저에서 CSS 또는 HTML을 사용하여 확인란의 크기를 설정할 수 있습니까?

width 와 size 는 IE6 +에서 작동하지만 Firefox에서는 작동하지 않습니다. Firefox에서는 더 작은 크기를 설정해도 확인란이 16x16으로 유지됩니다.

답변

---

(확장으로 인해) 약간 못 생겼지 만 대부분의 최신 브라우저에서 작동합니다.

 

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>

출처 : https://stackoverflow.com/questions/306924/can-i-change-the-checkbox-size-using-css