☰

CSSを使用してチェックボックスのサイズを変更できますか? 質問する

tag-icon • tag-icon html css
CSSを使用してチェックボックスのサイズを変更できますか? 質問する

ブラウザ間で CSS または HTML を使用してチェックボックスのサイズを設定することは可能ですか?

widthIE6 以降では動作sizeしますが、Firefox では動作しません。Firefox では、小さいサイズに設定してもチェックボックスは 16x16 のままです。

ベストアンサー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>

おすすめ記事