如何改变使用CSS单选button的大小？
有没有办法控制在CSS单选button的大小？
是的，你应该可以像任何元素一样设置它的高度和宽度。 但是，有些浏览器并没有考虑到这些属性。
这个演示概述了什么是可能的，以及如何在各种浏览器中显示。 http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
如您所见，造型单选button并不容易:-D
解决方法是使用JavaScript和CSS来用自定义图像replace单选button和其他表单元素：
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
…
虽然这是一个老问题，但它在这个问题上得票最多。 我还有最近遇到的另一个解决scheme。 这个CSS似乎是伎俩。
input[type=radio] { border: 0px; width: 100%; height: 2em; } 将边框设置为0似乎允许用户改变button的大小，并让浏览器以例如这样的尺寸来渲染它。 上面的高度：2em将渲染button的两倍线高度。 这也适用于checkbox（input[type = checkbox]）。 一些浏览器呈现比其他更好。
从一个窗口框它在ie8 +，ff21 +，chrome29 +。
干杯。
调整默认小部件的大小并不适用于所有浏览器，但是您可以使用JavaScript制作自定义单选button。 其中一种方法是创build隐藏的单选button，然后将自己的图像放在页面上。 点击这些图像可以改变图像（用选定状态下的单选buttonreplace点击的图像，并用处于未选状态的单选buttonreplace其他图像），并select新的单选button。
无论如何，有关于这个问题的文件。 例如，请阅读： 使用CSS和JavaScript设置样式checkbox和单选button 。
不直接。 事实上，一般的表单元素或者是单独使用CSS的风格，或者是不可能的。 最好的办法是：
- 使用javascript隐藏单选button。
- 使用JavaScript来添加/显示HTML可以被称为你喜欢如何
- 为所选状态定义css规则，这是通过向“yuor span”添加“selected”类触发的。
- 最后，编写javascript来使单选button的状态对点击进行反应，反之亦然，以便让单选button的状态（当用户使用键盘访问表单时）的变化作出反应。 第二部分可能会非常棘手，可以跨所有浏览器使用。 我使用类似以下的东西（也使用jQuery，我避免通过样式直接将“selected”类应用于input标签来增加额外的跨度）。
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风格控制单选button的大小：
style =“height：35px; width：35px;”
这直接控制单选button的大小。
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
老问题，但现在有一个简单的解决scheme，兼容大多数浏览器，这是使用CSS3 。 我在IE，Firefox和Chrometesting，它的工作原理。
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％。 如果比例非常高，则可能会模糊单选button。 下一张图片显示比例为1.5。
直接你不能这样做。 [据我所知]。
您应该使用images来代替单选button。 在大多数情况下，您可以使它们按照与单选button相同的方式工作，并且可以将它们制作为任意大小。
这是一种方法。 默认情况下，单选button大约是标签的两倍。
（请参阅答案结束处的CSS和HTML代码）
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 （模糊不IE浏览器的错误，在netrenderer.com托pipetesting）
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>
您也可以使用transform属性，并使用所需的值：
input[type=radio]{transform:scale(2);}
这在所有浏览器中都适用：
（简单的内联风格…）
<label style="font-size:16px;"> <input style="height:1em; width:1em;" type="radio"> <span>Button One</span> </label>
单选button和文本的大小将随标签的字体大小而变化。
试试这个代码…它可能是你正在寻找的答案
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>
<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"> 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>
