浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】簡易に大きなチェックボックスを用意する

 input[type=”checkbox”] な input 要素で要素をチェックボックスとして見せられます。この状態がなかなか曲者で width や height といった部分を変更してもチェックボックスの大きさが変わりません。しょうがなくスニペットをあさると大体、元のチェックボックスを display:noneで消して :before や :after を使って上書きしたりする、手の込んだものです。きっちりデザインを作るならそれで良いのですが、そこまででもないがチェックボックス自体をクリックしやすくしたい時があります。そういった時は次のちょっとしたスニペットをCSSとして適用すれば良いです

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


 これでチェックボックスをブラウザデフォルトのデザインのまま大きくできます。これぐらいならライブラリとして何かを読み込む必要もないためちゃちゃっと何かを作る時に案外便利です。

  • この記事いいね! (0)