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

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

401392 次浏览
小开

你不能直接这么做。

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

小开

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

Anyway, there is documentation on this subject. For example, read this: 使用 CSS 和 JavaScript 设计复选框和单选按钮的样式.

小开

不是直接的。事实上，一般来说，表单元素要么有问题，要么不可能单独使用 CSS 进行样式化。最好的办法是:

  1. hide the radio button using javascript.
  2. 使用 javascript 添加/显示可以按照您喜欢的样式设置的 HTML。
  3. Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
  4. 最后，编写 javascript 使单选按钮的状态对单击 span 做出反应，反之亦然，使 span 对单选按钮状态的变化做出反应(当用户使用键盘访问表单时)。第二部分很难在所有浏览器上运行。我使用下面这样的方法(它也使用 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>
小开

这个 css 看起来很有效:

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

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

从一个窗口框它工作在 IE8 + ，FF21 + ，Chrome29 + 。

小开 
<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 样式控制单选按钮的大小:

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

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

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

这里有一种方法，默认情况下单选按钮的大小是标签的两倍。
(See CSS and HTML code at end of answer)

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>
小开

试试这个代码... 它可能就是你正在寻找的答案

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>

小开

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

小开

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

(简单的内联样式...)

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

单选按钮和文本的大小都会随标签的字体大小而改变。

小开

您还可以使用转换属性，并使用所需的缩放值:

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

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

小开

A solution which works quite well is described right here: 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 */
}

The only drawback is that it is not supported yet on IE.

下面的 GIF 给出了一个可以实现的想法。在实际的浏览器中，结果看起来会更好。

enter image description here

还有活塞: https://plnkr.co/plunk/1W3QXWPi7hdxZJuT

小开

(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 函数，直接使用像素。这个案子！重要的是正确使用，在这种情况下，以覆盖悬停时，无线电被检查。

example of layout

小开

好吧，我来自未来，相对于这个问题发布的年份，但我相信我的答案将有利于所有的新访问者: 因此，如果你想用 CSS 增加“单选”按钮的大小，你可以简单地通过在 CSS 中放入以下样式规则来实现，它会帮助你,

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

提交答案