如何使用CSS更改单选按钮的大小?
是的,您应该可以像设置任何元素一样设置它的高度和宽度。但是,有些浏览器并未真正考虑这些属性。
本演示概述了在各种浏览器中显示的内容和方式。 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/
...
直接你不能这样做。 [根据我的知识]。
您应该使用images
取代单选按钮。在大多数情况下,您可以按照与单选按钮相同的方式使它们起作用,并且可以将它们制作成任意大小。
调整大小的默认控件在所有浏览器无法正常工作,但你可以自定义单选按钮使用JavaScript。其中一种方法是创建隐藏的单选按钮,然后在页面上放置自己的图像。点击这些图像可以改变图像(用单选按钮处于选定状态的图像取代点击的图像,并用处于未选状态的单选按钮取代其他图像)并选择新的单选按钮。
无论如何,有关于这个问题的文件。例如,请阅读:Styling Checkboxes and Radio Buttons with CSS and JavaScript。
不是直接。事实上,一般情况下,表单元素不是单独使用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>
虽然一个老问题,其对这一问题的多数选票。我有最近遇到的另一个解决方案。这个CSS似乎有伎俩。
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
设置边框为0,似乎允许用户更改按钮的大小,让浏览器渲染它在大小如。上面的高度:2em将渲染按钮的两倍线高度。这也适用于复选框(输入[type = checkbox])。有些浏览器呈现比其他浏览器更好。
从一个窗口框中它在ie8 +,ff21 +,chrome29 +中工作。
干杯。
这似乎不适用于我的Chrome。 – Will 2015-02-11 11:30:12
在铬中为我做出了小小的贡献。 – Pocketsand 2017-05-09 21:38:41
@对于Chrome来说似乎只适用于Windows。 – dlsso 2017-06-10 01:32:18
<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>
对此如何进行评论或说明会很有帮助。 – 2013-09-24 20:34:05
如果在源代码开始时没有结构错误,那将会很有用。 – 2013-12-12 14:00:36
可以控制单选按钮与CSS样式尺寸:
风格= “高度:35px;宽度:35px;”
这直接控制单选按钮的大小。
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
为防止删除,请编辑并解释其原因。 – 2015-12-21 00:29:32
下面是一种方法。默认情况下,单选按钮大约是标签的两倍。
(见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>
试试这个代码...这可能就是你到底找
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>
这工作正常,我在所有浏览器:
(为简单起见内嵌样式...)
<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>
同时设置宽度和高度,使用EM度量信息,如:宽度:1.2em;身高:1.2em; – 2013-11-09 11:06:30
现在[你可以使用CSS3](https://*.com/questions/4920281/how-to-change-the-size-of-the-radio-button-using-css/45654519#45654519),它作品。 – 2017-08-12 20:15:04