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

Question

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

Answer 1

是的,您应该能够像任何元素一样设置它的高度和宽度.但是,某些浏览器并未真正考虑这些属性.

该演示概述了可能的内容以及在各种浏览器中的显示方式. 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 /
...

Answer 2

虽然是一个老问题,但它在这个问题上得票最多.我最近遇到了另一种解决方案.这个CSS似乎可以解决问题.

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

将边框设置为0似乎允许用户更改按钮的大小并让浏览器以该大小呈现它,例如.上面的高度:2em会将按钮渲染为线高的两倍.这也适用于复选框(输入[type = checkbox]).有些浏览器比其他浏览器更好.

从Windows框中可以使用ie8 +,ff21 +,chrome29 +.

干杯.

Answer 3

旧问题但现在有一个简单的解决方案,与大多数浏览器兼容,即可使用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.

Answer 4

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

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

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>

Answer 5

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

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

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

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

Answer 6

这里描述了一个非常有效的解决方案：https : //developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

这个想法是使用属性（外观），当设置为 none 时，允许更改单选按钮的宽度和高度。单选按钮并不模糊，您可以添加其他效果，如过渡和其他东西。

这是一个例子：

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
  outline: unset !important /* I added this one for Edge (chromium) support */
}

唯一的缺点是 IE 尚不支持它。

下面是一个 GIF（渲染效果不太好），可让您了解可以实现的目标：在实际浏览器上，您将获得更好的结果。

和plunker：https ://plnkr.co/plunk/1W3QXWPi7hdxZJuT

Answer 7

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

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