28

いくつかのページでチェックボックスのサイズを 2 倍にしようとしています。CSSでそれを実現するにはどうすればよいですか？ホバーのスタイルを設定したくありません。

アイデア？

4

9 に答える 9

44

チェックボックスのサイズを 2 倍にするには、CSS の scale プロパティを使用できます。(2,2) は元の幅の 2 倍、高さの 2 倍を意味しますが、これはかなり大きくなります。

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

少しだけ大きいチェックボックスには、10 進数値を使用することもできます。

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }
于 2015-03-31T02:07:02.847 に答える
11

チェックボックスのスタイリングは危険なビジネスです。これは、すべてのブラウザで一貫して機能することは決してないように思われるものの1つです。

またはあなたはで試すことができます

 style="zoom:1.2"

jQueryは、チェックボックスを置き換えるためのプラグインを提供します

于 2012-11-29T17:42:41.067 に答える
10

チェックボックスハックを使用して、独自のチェックボックスをいつでも作成できます。これにより、クロスブラウザーとの互換性がはるかに高いソリューションが可能になります。

ここで簡単なデモを作成しました。明らかに、私が取得したものではなく、目盛りの透明な .png を取得する必要があります。

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}


input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}
<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

于 2012-11-29T17:57:38.890 に答える
3

あなたができる最善のことは、フォントサイズを大きくすることだと思います。そこからは、非表示のチェックボックスを制御するモック div 要素を作成しない限り、ブラウザーがそれを処理する方法次第です。それほどスケールアップしません。

input[type="checkbox"] {
  font-size: 50px;
}
于 2012-11-29T17:52:17.557 に答える
1

このライブラリを使用して成功しました

http://plugins.krajee.com/checkbox-x

jQuery とブートストラップ 3.x が必要です

ここから zip をダウンロードしてください: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

zip の内容をプロジェクト内のフォルダーに配置します。

ヘッダーに必要なライブラリをポップします

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

ここに示すように、data-size="xl" を使用してデータ コントロールを要素に追加し、サイズを変更しますhttp://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

プラグイン サイトを参照すると、他にも多数の機能があります。

于 2016-04-22T18:03:44.343 に答える
0

背景画像をチェックボックスに追加するだけです。また、サイズはお好みで調整してください。

以下のコードは、チェックされている場合に背景を自動的に追加し、サイズはチェックされていない状態で同じままです。

次のように指定する必要はありません。

input[type=checkbox]:checked

また

input[type=checkbox]:checked ~ div label

たとえば、すべてのチェックボックス:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

ここでフィドルを参照してください。

于 2016-07-27T05:20:45.437 に答える
0

チェックボックスのスタイリングは、クロスブラウザーの問題でいっぱいの非常に奇妙な世界です。詳細については、http://www.456bereastreet.com/lab/form_controls/checkboxes/を参照してください。JavaScript を使用して独自のものを作成することもできますが、これはユーザーのアクセシビリティには適していません。

したがって、可能であれば、変更を避けるようにします。

于 2012-11-29T17:44:44.853 に答える
-1

または、単に次のように高さと幅でスタイルを設定します。

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS。これをブートストラップと「checkbox-inline」クラスで使用しました

于 2016-05-18T19:55:07.220 に答える