クロムのチェックボックスのサイズが異なる

Question

私はいくつかの優雅な方法で、Chromeでのみ発生する設計上の問題を解決したいと考えています。 "入力"タイプのチェックボックスをdivとし、ブートストラップクラスcol-…がある場合。このdiv divはチェックボックスで埋められますが、Chromeではチェックボックスもサイズが大きくなります（大きくなります） 問題を解決するソリューションが見つかりましたが、理想的ではありません。 MDNこのないベストプラクティスに従っているため

JSFiddle example

@media (-webkit-min-device-pixel-ratio: 0) { 
     [class*="col-"] input[type=checkbox] { 
      -webkit-transform: scale(0.5) !important; 
     } 
    } 

はまず、私は、Chromeのみのため、このルールを作成する必要があります。 第2に、スケールの変更はチェックボックスのサイズに影響するだけでなく、div内のすべてのものにも影響します。そのため、顧客はチェックボックスをクリックしてチェックする必要はありません。 もっと良い解決策はありますか？

Answer 1

さて、あなたの問題はJSFiddleで提示あなたのコードでは、あなたが高さを固定しているform-controlクラスを使用していることです。 FFとChromeの動作に関しては、Chromeのみが実際にCSSを使用してチェックボックスのサイズを設定できるようです...

ブートストラップdocsをチェックし、チェックボックスがブートストラップにどのように実装されているかを確認することをおすすめします。