[CSS]AndroidのChromeブラウザでCSSを使ってチェックボックスを大きく表示する

HTMLでcheckboxを表示するように作ったサイトをAndroidのChoromeブラウザで閲覧すると、checkboxが異常に小さいという問題がありました。

CSSのheight、widthを指定しても何の変化もありません。。。

調べた結果、BALLOG様のサイトで紹介して下さっていた方法を利用させて頂きました。

スマートフォンでチェックボックスやラジオボタンを使いやすくする

CSSは以下のように書いておきます。

input.checkbox {
  -webkit-transform: scale(2.5);
  transform: scale(2.5);
}

HTML側でclassで指定します。

<input class="checkbox" type="checkbox" />

これでものすごく小さく表示されていたcheckboxが良い感じになりました。
動作確認はNexus7のChromeブラウザで確認しました。