web-dev-qa-db-ja.com

Webページのチェックボックス–大きくする方法

ほとんどのブラウザで表示される標準のチェックボックスは非常に小さく、大きなフォントを使用してもサイズが大きくなりません。ブラウザに依存しない、より大きなチェックボックスを表示する最良の方法は何ですか？

htmlcsscheckbox
100
Tony the Pony

これが誰にも役立つ場合に備えて、ここから出発点として簡単なCSSを紹介します。背景色を切り替えた親指に十分な大きさの基本的な丸みを帯びた正方形に変換します。

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}
<input type="checkbox" />
120
Paul

実際、他のものと同じように、チェックボックスを大きくする方法があります（Facebookのボタンのようなiframeでも）。

それらを「ズーム」要素にラップします。

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-Origin: 0 0;
  -ms-transform-Origin: 0 0;
  -webkit-transform-Origin: 0 0;
  -o-transform-Origin: 0 0;
  -moz-transform-Origin: 0 0;
}
<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

少し「スケール変更された」ように見えるかもしれませんが、動作します。

もちろん、そのdivをfloat：leftにして、ラベルをfloat：leftのほかに配置することもできます。

42
FlorianB

このCSSを試してください

input[type=checkbox] {width:100px; height:100px;}
26
Collin White

以下は、最新のブラウザー（IE9 +）でCSSのみのソリューションとして機能するトリックです。JavaScriptを使用してIE8以下をサポートするように改善できます。

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

labelのスタイルを設定して、チェックボックスの外観を設定します

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

JavaScriptの場合、ラベルをクラスに追加して状態を表示できます。また、次の関数を使用するのが賢明です。

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

#checkboxIDスタイルを変更するための編集

1
zzzzBov

私はphonegapアプリを書いています、そしてチェックボックスはサイズ、見た目などが異なります。それで私は自分で簡単なチェックボックスを作りました：

最初にHTMLコード：

<span role="checkbox"/>

次に、CSS：

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

チェックボックスの状態を切り替えるには、JQueryを使用しました。

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

しかし、それなしで簡単に行うことができます...

それが役立つことを願っています！

0
wesamot