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

38

是的，您应该可以像设置任何元素一样设置它的高度和宽度。但是，有些浏览器并未真正考虑这些属性。

本演示概述了在各种浏览器中显示的内容和方式。 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/
...

来源

2011-02-07 10:45:29 LapinLove404

+4

同时设置宽度和高度，使用EM度量信息，如：宽度：1.2em;身高：1.2em; – 2013-11-09 11:06:30

+0

现在[你可以使用CSS3]（https://stackoverflow.com/questions/4920281/how-to-change-the-size-of-the-radio-button-using-css/45654519#45654519），它作品。 – 2017-08-12 20:15:04

1

直接你不能这样做。 [根据我的知识]。

您应该使用images取代单选按钮。在大多数情况下，您可以按照与单选按钮相同的方式使它们起作用，并且可以将它们制作成任意大小。

来源

2011-02-07 10:43:28

3

调整大小的默认控件在所有浏览器无法正常工作，但你可以自定义单选按钮使用JavaScript。其中一种方法是创建隐藏的单选按钮，然后在页面上放置自己的图像。点击这些图像可以改变图像（用单选按钮处于选定状态的图像取代点击的图像，并用处于未选状态的单选按钮取代其他图像）并选择新的单选按钮。

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

来源

2011-02-07 10:47:57 aruseni

3

不是直接。事实上，一般情况下，表单元素不是单独使用CSS就会有问题或不可能。最好的办法是：

使用javascript隐藏单选按钮。
使用javascript添加/显示可以设计风格的HTML，例如
为选定状态定义css规则，这是通过向yuor跨度中添加“selected”类触发的。
最后，编写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>

来源

2011-02-07 10:54:01 wheresrhys

25

虽然一个老问题，其对这一问题的多数选票。我有最近遇到的另一个解决方案。这个CSS似乎有伎俩。

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

设置边框为0，似乎允许用户更改按钮的大小，让浏览器渲染它在大小如。上面的高度：2em将渲染按钮的两倍线高度。这也适用于复选框（输入[type = checkbox]）。有些浏览器呈现比其他浏览器更好。

从一个窗口框中它在ie8 +，ff21 +，chrome29 +中工作。

干杯。

来源

2013-09-04 07:34:03 user2745744

+1

这似乎不适用于我的Chrome。 – Will 2015-02-11 11:30:12

+0

在铬中为我做出了小小的贡献。 – Pocketsand 2017-05-09 21:38:41

+0

@对于Chrome来说似乎只适用于Windows。 – dlsso 2017-06-10 01:32:18

-3

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

来源

2013-09-24 20:16:56

+1

对此如何进行评论或说明会很有帮助。 – 2013-09-24 20:34:05

+2

如果在源代码开始时没有结构错误，那将会很有用。 – 2013-12-12 14:00:36

3

可以控制单选按钮与CSS样式尺寸：

风格= “高度：35px;宽度：35px;”

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

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

来源

2015-12-20 22:52:50 Tarik

+0

为防止删除，请编辑并解释其原因。 – 2015-12-21 00:29:32

1

下面是一种方法。默认情况下，单选按钮大约是标签的两倍。
（见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>

来源

2017-02-26 01:00:45 clearlight

-2

试试这个代码...这可能就是你到底找

body, html{ 
 
    height: 100%; 
 
    background: #222222; 
 
} 
 

 
.container{ 
 
    display: block; 
 
    position: relative; 
 
    margin: 40px auto; 
 
    height: auto; 
 
    width: 500px; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
\t color: #AAAAAA; 
 
} 
 

 
.container ul{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t overflow: auto; 
 
} 
 

 
ul li{ 
 
    color: #AAAAAA; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: 100px; 
 
\t 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{ 
 
\t color: #FFFFFF; 
 
} 
 

 
ul li .check{ 
 
    display: block; 
 
    position: absolute; 
 
    border: 5px solid #AAAAAA; 
 
    border-radius: 100%; 
 
    height: 25px; 
 
    width: 25px; 
 
    top: 30px; 
 
    left: 20px; 
 
\t z-index: 5; 
 
\t transition: border .25s linear; 
 
\t -webkit-transition: border .25s linear; 
 
} 
 

 
ul li:hover .check { 
 
    border: 5px solid #FFFFFF; 
 
} 
 

 
ul li .check::before { 
 
    display: block; 
 
    position: absolute; 
 
\t content: ''; 
 
    border-radius: 100%; 
 
    height: 15px; 
 
    width: 15px; 
 
    top: 5px; 
 
\t left: 5px; 
 
    margin: auto; 
 
\t transition: background 0.25s linear; 
 
\t -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>

来源

2017-06-07 06:28:28 Mausumi

5

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

来源

2017-08-12 20:12:28

0

这工作正常，我在所有浏览器：

（为简单起见内嵌样式...）

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

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

来源

2017-09-15 20:22:55

1

您还可以在规模使用变换属性，与所需的值：

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

来源

2017-09-15 20:29:59

0

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

来源

2018-01-05 05:34:18

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

回答

相关问题