web-dev-qa-db-ja.com

CSSを使用してラジオボタンのサイズを変更するにはどうすればよいですか？

CSSのラジオボタンのサイズを制御する方法はありますか？

htmlcssradio-button
81
Misha Moroshko

はい、他の要素と同様に高さと幅を設定できるはずです。ただし、一部のブラウザはこれらのプロパティを実際に考慮していません。

このデモでは、可能なことの概要と、さまざまなブラウザーでの表示方法について説明します。 http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

ご覧のとおり、ラジオボタンのスタイル設定は簡単ではありません:-D

回避策は、javascriptとcssを使用して、ラジオボタンとその他のフォーム要素をカスタム画像に置き換えることです。
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...

48
LapinLove404

古い質問ではありますが、この件について最も多くの票がありました。最近出会った別のソリューションがあります。このCSSはトリックを行うようです。

    input[type=radio] {
    border: 0px;
    width: 100%;
    height: 2em;
}

境界線を0に設定すると、ユーザーはボタンのサイズを変更し、ブラウザにそのサイズでレンダリングさせることができるようです。上記の高さ：2emは、行の高さの2倍でボタンをレンダリングします。これはチェックボックス（input [type = checkbox]）でも機能します。一部のブラウザーは他のブラウザーよりもレンダリングが良好です。

Windowsボックスからは、ie8 +、ff21 +、chrome29 +で動作します。

乾杯。

31
user2745744

古い質問ですが、現在、ほとんどのブラウザと互換性のある簡単なソリューションがあります。それはCSS3を使用することです。 IE、Firefox、Chromeでテストしましたが、動作します。

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

必要に応じて、値1.5を変更します。この場合、サイズを50％ずつ増やします。比率が非常に高い場合、ラジオボタンがぼやけることがあります。次の画像は、1.5の比率を示しています。

enter image description here

enter image description here

22
João Pimentel Ferreira

Cssスタイルでラジオボタンのサイズを制御できます。

style = "height：35px; width：35px;"

これにより、ラジオボタンのサイズが直接制御されます。

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
4
Tarik

直接ではありません。実際、一般にフォーム要素は、CSSのみを使用してスタイル設定するのに問題があるか、不可能です。最善のアプローチは次のとおりです。

  1. javaScriptを使用してラジオボタンを非表示にします。
  2. JavaScriptを使用して、好きなようにスタイル設定できるHTMLを追加/表示します。
  3. 選択された状態のcssルールを定義します。これは、クラス「selected」をyuorスパンに追加することによってトリガーされます。
  4. 最後に、javascriptを記述して、ラジオボタンの状態をスパンのクリックに反応させ、逆の場合も同様に、スパンをラジオボタンの状態の変化に反応させます（ユーザーがキーボードを使用してフォームにアクセスする場合）。これの2番目の部分は、すべてのブラウザーで動作するようにするには注意が必要です。次のようなものを使用します（jQueryも使用します。スタイルを設定し、「選択した」クラスを入力ラベルに直接適用することで、余分なスパンを追加することは避けます）。

javascript

var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
        if (this.checked) {
            select($(this).parent());
        }
    }).find("label").bind("click", function (event) { //mouse use
        select($(this));
    });

function select(el) {
    labels.removeClass("selected");
    el.addClass("selected");
}

html

<ul class="radioButtons">
    <li>
        <label for="employee1">
            employee1
            <input type="radio" id="employee1" name="employee" />
        </label>
    </li>
    <li>
        <label for="employee2">
            employee1
            <input type="radio" id="employee2" name="employee" />
        </label>
    </li>
</ul>
4
wheresrhys

これが一つのアプローチです。デフォルトでは、ラジオボタンはラベルの約2倍の大きさでした。
（回答の最後にあるCSSおよびHTMLコードを参照）

Safari: 10.0.3

enter image description here

Chrome: 56.0.2924.87

enter image description here

Firefox: 50.1.0

enter image description here

Internet Explorer: 9（IEのせいではなく、あいまいさ、netrenderer.comでホストされたテスト）

enter image description here

CSS：

.sortOptions > label {
    font-size:          8px;
}

.sortOptions > input[type=radio] {
    width:              10px;
    height:             10px;
}

HTML：

<div class="rightColumn">Answers
    <span class="sortOptions">
        <input type="radio" name="answerSortList" value="credate"/>
        <label for="credate">Creation</label>

        <input type="radio" name="answerSortList" value="lastact"/>
        <label for="lastact">Activity</label>

        <input type="radio" name="answerSortList" value="score"/>
        <label for="score">Score</label>

        <input type="radio" name="answerSortList" value="upvotes"/>
        <label for="upvotes">Up votes</label>

        <input type="radio" name="answerSortList" value="downvotes"/>
        <label for="downvotes">Down Votes</label>

        <input type="radio" name="answerSortList" value="accepted"/>
        <label for="downvotes">Accepted</label>

    </span>
</div>
3
clearlight

デフォルトのウィジェットのサイズ変更はすべてのブラウザで機能するわけではありませんが、JavaScriptを使用してカスタムラジオボタンを作成できます。方法の1つは、非表示のラジオボタンを作成し、ページに独自の画像を配置することです。これらの画像をクリックすると、画像が変更され（クリックされた画像は選択状態のラジオボタンのある画像に置き換えられ、他の画像は非選択状態のラジオボタンに置​​き換えられます）、新しいラジオボタンが選択されます。

とにかく、このテーマに関するドキュメントがあります。たとえば、次をお読みください： CSSとJavaScriptを使用したチェックボックスとラジオボタンのスタイル設定 。

3
Arseny
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}
  </style>
</head>
<body>

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
</div>

</body>
</html>
2
Waruna Manjula

直接これを行うことはできません。 [私の知る限り]。

imagesを使用して、ラジオボタンを置き換える必要があります。ほとんどの場合、ラジオボタンと同じように機能させることができ、任意のサイズにすることができます。

1
Harry Joy

これはすべてのブラウザでうまく機能します：

（簡単にするためのインラインスタイル...）

<label style="font-size:16px;">
    <input style="height:1em; width:1em;" type="radio">
    <span>Button One</span>
</label>

ラジオボタンとテキストの両方のサイズは、ラベルのフォントサイズに応じて変わります。

0
Ron Richardson

必要なスケールの値を指定して、transformプロパティを使用することもできます。

input[type=radio]{transform:scale(2);}
0
Abhishek Kumawat