web-dev-qa-db-ja.com

ラジオボタンを大きくしますか？

CSSを使用してラジオボタンを大きくする方法はありますか？

そうでない場合、他にどのようにすればよいですか？

htmlcssbuttonradio-button
35
Latox

このコードを試してください：

input[type='radio'] { transform: scale(2); }

63
Manish Patel

他の要素と同様に、高さと幅を簡単に設定できます。

ここにコードのフィドルがあります

JSFIDDLE BIG RADIO BUTTON

[〜＃〜] html [〜＃〜]

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

[〜＃〜] css [〜＃〜]

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

ラジオボタンのスタイル設定は簡単ではありません。

一般に、フォーム要素は、CSS alone。

ラジオボタンのサイズを大きくして、独自のスタイルのこのリンクをたどってください。

このリンクもご覧ください...

大きなラジオボタン

13
KesaVan

CSSを使用して実行できますが、ブラウザとOSもこれに影響します。次の記事をご覧ください。

CSSを使用したラジオボタンのスタイル設定

2
Naveed

これを試して：

[〜＃〜] html [〜＃〜]

<label>
   <input type="radio" value="1">
   <div></div>
</label>

[〜＃〜] css [〜＃〜]

input[type="radio"] {
   display: none;
}

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

デモ： http://jsfiddle.net/nuzhysgg/

1
Cas Bloem

transform: scale(1.3)を使用しないでください。本当に恐ろしいです。これを使用してください：

input[type='radio'] {
    height: 15px
    width: 15px;
    vertical-align: middle;
}

...

<input type="radio">Select this item
0
Paul Kruger

風変わりな<span>ラジオ要素内部のトリックですが、異なるブラウザでそれらを使用すると、デバッグするのが面倒になると思います。

過去に このスクリプト を使用しましたが、最近ではありません。

0
Cole