web-dev-qa-db-ja.com

CSSによるチェックボックスサイズの変更

クラスとIDなしでチェックボックスのサイズを（グローバルに）変更するにはどうすればよいですか？これとは異なる方法でこれを行うことは可能ですか？

input[type=checkbox] {
    zoom: 1.5;
}
htmlcssmobile
40
Klapsius

inputフィールドは、必要に応じてスタイル設定できます。したがって、ズームの代わりに、

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}

編集：

次のような追加のルールを追加する必要があります。

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

このフィドルを確認してください http://jsfiddle.net/p36tqqyq/1/

70
Charleshaa

これを行うことができます。

input[type=checkbox] {

 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
  padding: 10px;
}
26
Shreejibawa

これを試して

<input type="checkbox" style="zoom:1.5;" />
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */
12
Genish Parvadia