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要么有问题，要么不可能。最好的方法是：

使用javascript隐藏单选按钮。
使用javascript添加/显示可以设置样式的HTML，例如：
为选定状态定义css规则，通过将“选定”类添加到yuor span来触发。
最后，编写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

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

无论如何，有关于这个主题的文件。例如，请阅读：Styling Checkboxes and Radio Buttons with CSS and JavaScript。

Answer 6

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

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

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

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>

Answer 7

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

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

Answer 8

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

Answer 9

此处描述了一种效果很好的解决方案： 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（渲染效果不太好），以说明可以实现的目标：您将在实际的浏览器中获得更好的结果。

还有朋克：https://plnkr.co/plunk/1W3QXWPi7hdxZJuT

Answer 10

这适用于所有浏览器：

（简洁的内联样式......）

public boolean equals(Object object) {
    final EqualsStrategy2 strategy = JAXBEqualsStrategy.INSTANCE2;
    return equals(null, null, object, strategy);
}

public boolean equals(ObjectLocator thisLocator, ObjectLocator thatLocator, Object object, EqualsStrategy2 strategy) {
    if ((object == null)||(this.getClass()!= object.getClass())) {
        return false;
    }
    if (this == object) {
        return true;
    }
    final PurchaseOrderType that = ((PurchaseOrderType) object);
    {
        USAddress lhsShipTo;
        lhsShipTo = this.getShipTo();
        USAddress rhsShipTo;
        rhsShipTo = that.getShipTo();
        if (!strategy.equals(LocatorUtils.property(thisLocator, "shipTo", lhsShipTo), LocatorUtils.property(thatLocator, "shipTo", rhsShipTo), lhsShipTo, rhsShipTo, (this.shipTo!= null), (that.shipTo!= null))) {
            return false;
        }
    }
    // ...
    return true;
}

public int hashCode() {
    final HashCodeStrategy2 strategy = JAXBHashCodeStrategy.INSTANCE2;
    return this.hashCode(null, strategy);
}

public int hashCode(ObjectLocator locator, HashCodeStrategy2 strategy) {
    int currentHashCode = 1;
    {
        USAddress theShipTo;
        theShipTo = this.getShipTo();
        currentHashCode = strategy.hashCode(LocatorUtils.property(locator, "shipTo", theShipTo), currentHashCode, theShipTo, (this.shipTo!= null));
    }
    // ...
    return currentHashCode;
}

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

Answer 11

您还可以使用transform属性，其中包含所需的比例值：

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

Answer 12

（Vue3）HTML：

<h2>Group By</h2>
<div class="radioButtons">
   <label><input type="radio" id="groupByDevice" 
      v-model="data.groupBy" value="device" />
      <span>Device Location</span>
   </label>
   <label><input type="radio" id="groupByLocation" 
      v-model="data.groupBy" value="location" />
      <span>Device Type</span></label>
   </div>
</div>

SASS：

$vw-viewport: 2400px;
@function toVw($vw-viewport, $value) {
   @return ($value / $vw-viewport) * 100vw;
}

label {
  font-size: toVw($vw-viewport, 16px);
  line-height: toVw($vw-viewport, 18px);
}

.radioButtons {
  > label {
    white-space: no-wrap;
    display: inline-block;
    height: toVw($vw-viewport, 22px);
    margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;

    > input[type=radio] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      border-radius: 50%;
      width: toVw($vw-viewport, 18px);
      height:toVw($vw-viewport, 18px);
      border: toVw($vw-viewport,2px) solid #747474;
      margin: 0;
      position: relative;
      top: toVw($vw-viewport, 2px);
      background: white;
  
      &::after {
        content: '';
        position: absolute;
        top: 12.5%;
        left: 12.5%;
        right: 12.5%;
        bottom: 12.5%;
        width: auto;
        height: auto;
        background: rgb(80, 95, 226);
        opacity: 0;
        border-radius: 50%;
        transition: 0.2s opacity linear;
      }

      &:checked {
        &::after {
          opacity: 1 !important;
          background: rgb(80, 95, 226) !important;
        }
      }
    }

    &:hover {
      cursor: pointer;
      > input[type=radio]::after {
        opacity: 1;
        background: #cfd1e2;
      }
    }

    > span {
      display: inline-block;
      position: relative;
      top: toVw($vw-viewport, -1px);
      padding-left: toVw($vw-viewport, 7px);
    }
  }
}

结果是这样的。悬停时，也会出现一个灰点。当有空间时，标签将水平包装，此处没有足够的空间，因此它们会堆叠。这与页面缩放。如果不需要，去掉SASS函数，直接使用像素。这是一个 !important 被正确使用的情况，恕我直言，在这种情况下，在检查收音机时覆盖悬停。

Answer 13

好吧，与此问题发布的年份相比，我来自未来，但我相信我的回答将使所有新访问者受益：因此，如果您想使用 CSS 增加“单选按钮”的大小，您只需将以下样式规则放入 CSS 中即可，它会对您有所帮助，

input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;

}

Answer 14

试试这段代码......你可能正在寻找的是

body, html{
  height: 100%;
  background: #222222;
}

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

h2 {
	color: #AAAAAA;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
	overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
	color: #FFFFFF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #FFFFFF;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

<ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Male</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Female</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Transgender</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>

Answer 15

<html>
    <head>
    </head>
    <body>

<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
    var groupelements = document.getElementById(groupelement);
    var buttons = groupelements.getElementsByTagName("button");
    for (i=0;i<buttons.length;i++) {
        if (buttons[i].id.indexOf("_on") != -1) {
            buttons[i].style.display="none";
        } else {
            buttons[i].style.display="block";
        }
    }
    var buttonON = buttonelement + "_button_on";
    var buttonOFF = buttonelement + "_button_off";
    document.getElementById(buttonON).style.display="block";
    document.getElementById(buttonOFF).style.display="none";
    document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>

<form>
    <h1>farbige Radiobutton</h1>
    <div id="button_group">
        <input type="hidden" name="button_value" id="button_value" value=""/>
        <span class="radiobuttons">
            <button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
            <button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
            <label for="button1_button_on">&nbsp;&nbsp;Ich will eins</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
            <button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
            <label for="button2_button_on">&nbsp;&nbsp;Ich will zwei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
            <button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
            <label for="button3_button_on">&nbsp;&nbsp;Ich will drei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
            <button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
            <label for="button4_button_on">&nbsp;&nbsp;Ich will vier</label>
        </span>
    </div>
</form>

    </body>
</html>

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

15 个答案: