CSS を使用して、異なるブラウザ間でチェックボックスのサイズを一貫して変更するにはどうすればよいですか?

CSS を使用したチェックボックスのサイズのカスタマイズ

チェックボックスのサイズの変更は、特にブラウザ間の互換性を試みる場合に困難になることがあります。幅やサイズなどのスタイル設定テクニックは Internet Explorer 6 以降では機能しますが、Firefox では無効なままであり、チェックボックスはデフォルトの 16x16 サイズのままです。

ブラウザ間のサイズ変更のための CSS ソリューション

見た目は良くありませんが、次の CSS アプローチを使用すると、最新の環境でチェックボックスのサイズをカスタマイズできます。ブラウザ:

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;
}

HTML 実装

HTML コード内で、サイズ変更を適用するために提供されたクラスのチェックボックス オプションを囲みます:

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

注: スケーリングにより、視覚的に異なる場合があります。不完全さ。ただし、このソリューションは、Firefox を含む複数のブラウザ間でチェックボックスのサイズを効果的に調整します。

以上がCSS を使用して、異なるブラウザ間でチェックボックスのサイズを一貫して変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。