web-dev-qa-db-ja.com

CSSを作成してチェックボックスを拡大する

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

アイデア？

csscss3resizelabelcheckbox
25
codeChris

常にチェックボックスハックを使用して、独自のチェックボックスを作成できます。これにより、より多くのブラウザ間で互換性のあるソリューションが可能になります。

簡単なデモを作成しました here 、明らかに、私が得たものではなく、透明な.pngの.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>
10
Andy

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

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

わずかに大きいチェックボックスに小数を使用することもできます。

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

チェックボックスのスタイル設定はリスクの高いビジネスです。これは、すべてのブラウザーで一貫して機能するようには思われないものの1つです。

または、試してみることができます

 style="zoom:1.2"

jQueryは、チェックボックスの置換を行う plugin を提供します

11
Rahul Tripathi

これは動作します。相対的なサイズを使用するため、現在のフォントサイズに合わせてスケーリングされます。

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

ただし、マージンを調整する必要がある場合があります。

9
Chloe

できることは、フォントサイズを大きくすることです。そこからは、非表示のチェックボックスを制御するモックdiv要素を作成しない限り、ブラウザーでの処理方法に依存します。それほど大きくはなりません。

input[type="checkbox"] {
  font-size: 50px;
}
3
Kurt Emch

背景画像をチェックボックスに追加するだけです。必要に応じてサイズを調整します。

以下のコードは、checkedの場合にバックグラウンドを自動的に追加し、サイズはuncheckedステータスと同じままです。

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

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;
}

Fiddle here を参照してください。

0
aldrien.h

私はこのライブラリを成功裏に使用しました

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

JQueryとbootstrap 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"/>

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

0
DropHit

チェックボックスのスタイル設定は、クロスブラウザの問題を完全に解決する非常に奇妙な世界です。詳細はこちらで確認できます http://www.456bereastreet.com/lab/form_controls/checkboxes/ また、javascriptを使用して独自に作成することもできますが、ユーザーのアクセシビリティには向いていません。

だから、可能であれば変更を避けてトレイになります。

0
Dominic Green