如何使用 CSS 更改单选按钮的大小？
Posted
技术标签:
【中文标题】如何使用 CSS 更改单选按钮的大小？【英文标题】：How to change the size of the radio button using CSS? 【发布时间】：2011-06-22 15:50:41 【问题描述】：有没有办法在 CSS 中控制单选按钮的大小？
【问题讨论】：
【参考方案1】：好吧，与发布此问题的年份相比，我来自未来，但我相信我的回答将使所有新访客受益： 因此，如果您想使用 CSS 增加“单选”按钮的大小，您可以通过在 CSS 中添加以下样式规则来简单地做到这一点，它会对您有所帮助，
input[radio]
height: 20px;
width: 20px;
vertical-align: middle;
【讨论】：
对我来说垂直对齐底部固定对齐问题【参考方案2】：（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 被正确使用的情况，恕我直言，在这种情况下，在检查收音机时覆盖悬停。
【讨论】：
【参考方案3】：这里描述了一个效果很好的解决方案： 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
【讨论】：
【参考方案4】：这个 css 似乎可以解决问题：
input[type=radio]
border: 0px;
width: 100%;
height: 2em;
将边框设置为 0 似乎允许用户更改按钮的大小并让浏览器以该大小呈现它，例如。上面的 height: 2em 将在两倍行高处渲染按钮。这也适用于复选框 (input[type=checkbox])。有些浏览器的渲染效果比其他浏览器好。
从 windows 框中，它可以在 IE8+、FF21+、Chrome29+ 中运行。
【讨论】：
在 Chromium 中为我制作了微小的东西。【参考方案5】：<!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>【讨论】：
感谢您提供答案，一些解释会很好:)【参考方案6】：老问题，但现在有一个简单的解决方案，兼容大多数浏览器，即使用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 的比率。
【讨论】：
此解决方案虽然有效，但会使单选按钮变得模糊。不要使用这个。 这将取决于规模。比例为 1.5 即可。 @Vadim 我现在在 Chrome 中测试，比例为 1.5，缩放 300%，完全可以。 在我相对较低分辨率的显示器 (1920 x 1080) 上，即使在 100% 的缩放级别下，单选按钮也非常模糊。在视网膜显示器上，它会更加模糊。如今，甚至某些手机的分辨率都比我的显示器更高。就像我之前说的，您无法控制图像的缩放比例。在某些屏幕上可能看起来不错。你的可能看起来不错，但解决方案并不通用。 这个解决方案对我来说效果很好，另外还可以保持标签的内容垂直居中【参考方案7】：这在所有浏览器中都适用于我：
（为简单起见的内联样式...）
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
单选按钮和文本的大小都会随着标签的字体大小而变化。
【讨论】：
【参考方案8】：您也可以使用 transform 属性，在 scale 中使用所需的值：
input[type=radio]transform:scale(2);
【讨论】：
João Pimentel Ferreira 的回答重复【参考方案9】：试试这个代码...它可能正是你要找的答案
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>【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读此how-to-answer 以提供高质量的答案。 感谢您的评论和指导。我是堆栈溢出的新成员。这个答案是我自己在谷歌的帮助下找到的，所以我虽然可以节省其他时间。所以我把它贴在这里... @Mausumi 是的，但是关于 how 和 why 的一些额外解释将使它成为一个更好的堆栈溢出答案:-) 【参考方案10】：这是一种方法。默认情况下，单选按钮的大小大约是标签的两倍。（请参阅答案末尾的 CSS 和 HTML 代码）
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9（模糊不是 IE 的错，在 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>
【讨论】：
【参考方案11】：您可以使用 css 样式控制单选按钮的大小：
style="height:35px; width:35px;"
这直接控制单选按钮的大小。
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
【讨论】：
为防止其被删除，请编辑并解释其工作原理。 @Rohit Gupta 您可以更改样式="height:35px; width:35px;"控制单选按钮的大小。 我试过了，很惊讶它在 IE、Edge 和 Chrome 上运行良好。 Firefox，没那么多。 为我在 Firefox 和 Chrome 中工作，支持【参考方案12】：不直接。事实上，一般来说，表单元素要么是有问题的，要么是不可能单独使用 CSS 来设置样式的。最好的方法是：
-
使用 javascript 隐藏单选按钮。
使用 javascript 添加/显示可以按照您喜欢的方式设置样式的 HTML，例如
为选定状态定义 css 规则，通过将“选定”类添加到您的跨度来触发。
最后，编写 javascript 使单选按钮的状态对跨度的点击做出反应，反之亦然，使跨度对单选按钮状态的变化做出反应（当用户使用键盘访问表单时） .第二部分可能很难在所有浏览器上工作。我使用类似以下的东西（它也使用 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>
【讨论】：
【参考方案13】：<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;
.radiobuttonsfloat: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"> 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"> 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"> 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"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>
【讨论】：
如果有 cmets 或关于其工作原理的描述会很有用。 在你的源代码的开头没有结构错误会很有用。【参考方案14】：调整默认小部件的大小不适用于所有浏览器，但您可以使用 JavaScript 制作自定义单选按钮。其中一种方法是创建隐藏的单选按钮，然后在页面上放置您自己的图像。单击这些图像会更改图像（将单击的图像替换为具有选中状态的单选按钮的图像，并将其他图像替换为未选中状态的单选按钮）并选择新的单选按钮。
无论如何，有关于这个主题的文档。例如，阅读：Styling Checkboxes and Radio Buttons with CSS and JavaScript。
【讨论】：
【参考方案15】：直接你不能这样做。 [据我所知]。
您应该使用 images 来代替单选按钮。在大多数情况下，您可以使它们以与单选按钮相同的方式发挥作用，并且您可以将它们设置为任何您想要的大小。
【讨论】：
这个答案非常不明智——当然你可以直接做。不，你不应该在第一个实例中尝试使用图片 - 这会导致你的页面额外不必要的膨胀 对单选按钮使用图像占位符对我来说似乎不是一个好主意以上是关于如何使用 CSS 更改单选按钮的大小？的主要内容，如果未能解决你的问题，请参考以下文章