Is there a way to control the size of the radio button in CSS ?
This question is related to
html
css
radio-button
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9
(Fuzziness not IE's fault, hosted test on 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>
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
try this code... it may be the ans what you exactly looking for
body, html{_x000D_
height: 100%;_x000D_
background: #222222;_x000D_
}_x000D_
_x000D_
.container{_x000D_
display: block;_x000D_
position: relative;_x000D_
margin: 40px auto;_x000D_
height: auto;_x000D_
width: 500px;_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
color: #AAAAAA;_x000D_
}_x000D_
_x000D_
.container ul{_x000D_
list-style: none;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
overflow: auto;_x000D_
}_x000D_
_x000D_
ul li{_x000D_
color: #AAAAAA;_x000D_
display: block;_x000D_
position: relative;_x000D_
float: left;_x000D_
width: 100%;_x000D_
height: 100px;_x000D_
border-bottom: 1px solid #333;_x000D_
}_x000D_
_x000D_
ul li input[type=radio]{_x000D_
position: absolute;_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
ul li label{_x000D_
display: block;_x000D_
position: relative;_x000D_
font-weight: 300;_x000D_
font-size: 1.35em;_x000D_
padding: 25px 25px 25px 80px;_x000D_
margin: 10px auto;_x000D_
height: 30px;_x000D_
z-index: 9;_x000D_
cursor: pointer;_x000D_
-webkit-transition: all 0.25s linear;_x000D_
}_x000D_
_x000D_
ul li:hover label{_x000D_
color: #FFFFFF;_x000D_
}_x000D_
_x000D_
ul li .check{_x000D_
display: block;_x000D_
position: absolute;_x000D_
border: 5px solid #AAAAAA;_x000D_
border-radius: 100%;_x000D_
height: 25px;_x000D_
width: 25px;_x000D_
top: 30px;_x000D_
left: 20px;_x000D_
z-index: 5;_x000D_
transition: border .25s linear;_x000D_
-webkit-transition: border .25s linear;_x000D_
}_x000D_
_x000D_
ul li:hover .check {_x000D_
border: 5px solid #FFFFFF;_x000D_
}_x000D_
_x000D_
ul li .check::before {_x000D_
display: block;_x000D_
position: absolute;_x000D_
content: '';_x000D_
border-radius: 100%;_x000D_
height: 15px;_x000D_
width: 15px;_x000D_
top: 5px;_x000D_
left: 5px;_x000D_
margin: auto;_x000D_
transition: background 0.25s linear;_x000D_
-webkit-transition: background 0.25s linear;_x000D_
}_x000D_
_x000D_
input[type=radio]:checked ~ .check {_x000D_
border: 5px solid #0DFF92;_x000D_
}_x000D_
_x000D_
input[type=radio]:checked ~ .check::before{_x000D_
background: #0DFF92;_x000D_
}
_x000D_
<ul>_x000D_
<li>_x000D_
<input type="radio" id="f-option" name="selector">_x000D_
<label for="f-option">Male</label>_x000D_
_x000D_
<div class="check"></div>_x000D_
</li>_x000D_
_x000D_
<li>_x000D_
<input type="radio" id="s-option" name="selector">_x000D_
<label for="s-option">Female</label>_x000D_
_x000D_
<div class="check"><div class="inside"></div></div>_x000D_
</li>_x000D_
_x000D_
<li>_x000D_
<input type="radio" id="t-option" name="selector">_x000D_
<label for="t-option">Transgender</label>_x000D_
_x000D_
<div class="check"><div class="inside"></div></div>_x000D_
</li>_x000D_
</ul>
_x000D_
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]
). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Directly you can not do this. [As per my knowledge].
You should use images
to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3
. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5
, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
A solution which works quite well is described right here: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the property (appearance), which when sets to none allows to change the width and height of the radio button. The radio buttons are not blurry, and you can add other effect like transitions and stuff.
Here's an example :
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.
Here's a GIF (with a not so good rendering) below to give an idea of what can be achieved: you will get way better results on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
<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>
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
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>
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<title>Bootstrap Example</title>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<style>_x000D_
input[type="radio"] {_x000D_
-ms-transform: scale(1.5); /* IE 9 */_x000D_
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */_x000D_
transform: scale(1.5);_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="container">_x000D_
<h2>Form control: inline radio buttons</h2>_x000D_
<p>The form below contains three inline radio buttons:</p>_x000D_
<form>_x000D_
<label class="radio-inline">_x000D_
<input type="radio" name="optradio">Option 1_x000D_
</label>_x000D_
<label class="radio-inline">_x000D_
<input type="radio" name="optradio">Option 2_x000D_
</label>_x000D_
<label class="radio-inline">_x000D_
<input type="radio" name="optradio">Option 3_x000D_
</label>_x000D_
</form>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>
_x000D_
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Source: Stackoverflow.com