Html 如何使用 CSS 更改单选按钮的大小？

How to change the size of the radio button using CSS?

提问by Misha Moroshko

Is there a way to control the size of the radio button in CSS ?

有没有办法控制 CSS 中单选按钮的大小？

采纳答案by LapinLove404

Yes, you should be able to set its height and width, as with any element. However, some browsers do not really take these properties into account.

是的，您应该能够像任何元素一样设置其高度和宽度。然而，一些浏览器并没有真正考虑这些属性。

This demo gives an overview of what is possible and how it is displayed in various browsers: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

此演示概述了可能的内容以及它在各种浏览器中的显示方式：https: //www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

As you'll see, styling radio buttons is not easy :-D

正如您将看到的，样式化单选按钮并不容易 :-D

A workaround is to use JavaScript and CSS to replace the radio buttons and other form elements with custom images:

一种解决方法是使用 JavaScript 和 CSS 将单选按钮和其他表单元素替换为自定义图像：

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/201611119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

回答by user2745744

This css seems to do the trick:

这个 css 似乎可以解决问题：

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

Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.

将边框设置为 0 似乎允许用户更改按钮的大小并让浏览器以该大小呈现它，例如。上述 height: 2em 将以两倍行高呈现按钮。这也适用于复选框 ( input[type=checkbox])。有些浏览器的渲染效果比其他浏览器好。

From a windows box it works in IE8+, FF21+, Chrome29+.

在 Windows 框中，它适用于 IE8+、FF21+、Chrome29+。

回答by Jo?o Pimentel Ferreira

Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.

老问题，但现在有一个简单的解决方案，与大多数浏览器兼容，那就是使用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);
}

Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.

1.5根据您的需要更改值，在这种情况下，大小增加 50%。如果比率非常高，它会模糊单选按钮。下图显示的比率为 1.5。

回答by Tarik

You can control radio button's size with css style:

您可以使用 css 样式控制单选按钮的大小：

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

样式=“高度：35px；宽度：35px；”

This directly controls the radio button size.

这直接控制单选按钮的大小。

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

回答by wheresrhys

Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:

不直接。事实上，一般来说，单独使用 CSS 来设计表单元素是有问题的，或者是不可能的。最好的方法是：

1. hide the radio button using javascript.
2. Use javascript to add/display HTML that can be styled how you like e.g.
3. Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
4. Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).

1. 使用javascript隐藏单选按钮。
2. 使用 javascript 添加/显示可以按照您喜欢的样式设置的 HTML，例如
3. 为选定状态定义 css 规则，这是通过将“选定”类添加到您的跨度来触发的。
4. 最后，编写 javascript 使单选按钮的状态对跨度上的点击做出反应，反之亦然，使跨度对单选按钮状态的变化做出反应（当用户使用键盘访问表单时）。第二部分可能很难在所有浏览器上工作。我使用类似下面的东西（它也使用 jQuery。我也避免添加额外的跨度，通过设置样式并将“selected”类直接应用到输入标签）。

javascript

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

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>

回答by clearlight

Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)

这是一种方法。默认情况下，单选按钮大约是标签的两倍大。
（请参阅答案末尾的 CSS 和 HTML 代码）

---

---

Safari: 10.0.3

Safari: 10.0.3

---

---

Chrome: 56.0.2924.87

Chrome: 56.0.2924.87

---

---

Firefox: 50.1.0

Firefox: 50.1.0

---

---

Internet Explorer: 9(Fuzziness not IE's fault, hosted test on netrenderer.com)

Internet Explorer: 9（模糊不是 IE 的错，在 netrenderer.com 上托管测试）

---

---

CSS:

CSS：

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

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

HTML:

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>                

回答by Arseny

Resizing the default widget doesn't work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.

调整默认小部件的大小并不适用于所有浏览器，但您可以使用 JavaScript 制作自定义单选按钮。一种方法是创建隐藏的单选按钮，然后将您自己的图像放在您的页面上。单击这些图像会更改图像（用处于选中状态的带有单选按钮的图像替换单击的图像，并用处于未选中状态的单选按钮替换其他图像）并选择新的单选按钮。

Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.

无论如何，有关于这个主题的文档。例如，请阅读：使用 CSS 和 JavaScript 设置复选框和单选按钮的样式。

回答by Waruna Manjula

<!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>

回答by Harry Joy

Directly you can not do this. [As per my knowledge].

直接你不能这样做。[据我所知]。

You should use imagesto supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.

您应该使用images来取代单选按钮。在大多数情况下，您可以使它们以与单选按钮相同的方式起作用，并且您可以将它们设置为您想要的任何大小。

回答by Ron Richardson

This works fine for me in all browsers:

这在所有浏览器中对我来说都很好：

(inline style for simplicity...)

（为简单起见，内联样式...）

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

The size of both the radio button and text will change with the label's font-size.

单选按钮和文本的大小将随着标签的字体大小而变化。