input[type=”checkbox”] な input 要素で要素をチェックボックスとして見せられます。この状態がなかなか曲者で width や height といった部分を変更してもチェックボックスの大きさが変わりません。しょうがなくスニペットをあさると大体、元のチェックボックスを display:noneで消して :before や :after を使って上書きしたりする、手の込んだものです。きっちりデザインを作るならそれで良いのですが、そこまででもないがチェックボックス自体をクリックしやすくしたい時があります。そういった時は次のちょっとしたスニペットをCSSとして適用すれば良いです
input[type="checkbox"]
{
transform: scale(2);
}
これでチェックボックスをブラウザデフォルトのデザインのまま大きくできます。これぐらいならライブラリとして何かを読み込む必要もないためちゃちゃっと何かを作る時に案外便利です。
