I've been trying to make custom radio buttons work. I had been using check boxes but found that I needed to restrict the checked options to one. I've been looking at examples/tutorials that I found using Google and thought I understood enough for a simple set of 4 radio buttons but ...
They display correctly initially with the first button checked but checking on other buttons just displays the checked PNG: a previously checked button does not revert to unchecked state.
The buttons are arranged sequentially horizontally in their own div.
HTML
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' checked>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' >
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' >
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' >
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
CSS3
.radiobutton-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 15px;
}
input[type="radio"] {
display: none;
margin: 10px;
}
.radiobutton-label:before {
content:"";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]: + label:before {
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]:checked + label:before {
background: url(resources/CheckBoxOK.png) left top;
}
This is the first web page that I have attempted.
Relevant Spec - 17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, just give them all the same name attribute. In this instance, I just used name="checkboxes".
Updated HTML EXAMPLE HERE
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
Base CSS:
input[type=radio] + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat;
}
Related
Edit: The original answer did not work for mobile devices. Go here for a solution that does.
I already know how to make an <input type="radio">'s <label> look like the button of any specific browser's default <button> by playing with the CSS until it looks identical to the <button> I'm trying to replicate. But this will look out of place whenever someone views it from a browser that has a different default <button>. (Even if I could replicate every default <button> for every browser, a new one will probably be invented tomorrow.)
Therefore, I want to use an actual button to get the default styling appropriate to the browser.
A recreation of the code so far:
<h1>Choose A or B</h1>
<label><button type="button"><input type="radio" name="choice" value="A">A</button></label>
<label><button type="button"><input type="radio" name="choice" value="B">B</button></label>
Later I'll change <input type="radio" name="choice" value="A"> to <input type="radio" name="choice" value="A" hidden> and use some other styling to show if it's checked or not, but for now I'm leaving it in for diagnostic reasons.
If you run the snippet, you'll notice that clicking the <input type="radio"> works as intended, but clicking the <button>itself does nothing.
Here is another failed attempt:
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
I even tried adding the disabled attribute. Nothing is working as intended. Should I give up and style the <label> manually, or is there a way to access <button>'s default appearance anyway?
(Yes, I already know I could use javascript to simulate <input type="radio">'s behaviour on a <button> but I'm going to have lots of buttons in lots of groups throughout the website. So I'll just style <label> manually if it means the website will be easier to maintain. Likewise for installing an entire library just for this one problem.)
An idea is to add pointer-events:none; to the button but you won't have the styles of the :focus,:active and :hover state.
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
You can, however, add your own custom :focus :active :hover and :checked state with:
input[type="radio"]:focus + label button{
/*add checked style here*/
label:hover > button {
/*add hover style here*/
}
label:active > button {
/*add active style here*/
}
input[type="radio"]:checked + label button{
/*add checked style here*/
It will not work, as you are doing. You need to do it like this.
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 30px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
z-index: -1;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 94px;
height: 24px;
background: #F87DA9;
position: absolute;
top: 4px;
left: 4px;
border-radius: 5px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: -1;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
<form action="#">
<p>
<input type="radio" id="test1" name="radio-group" checked>
<label for="test1">Apple</label>
</p>
<p>
<input type="radio" id="test2" name="radio-group">
<label for="test2">Peach</label>
</p>
<p>
<input type="radio" id="test3" name="radio-group">
<label for="test3">Orange</label>
</p>
</form>
You can do it using CSS :before and :after pseudo-classes without using any button. You can modify the above example as per your requirements.
Code is copied from https://codepen.io/manabox/pen/raQmpL and is used after modifications in the above example.
I wanted to use image instead of regular radio inputs.
I made it this way:
input[type="radio"]{
content:url('/images/new-home-page/Checkbox.png');
height:3vh;
width:3vh;
}
input[type="radio"]:checked{
content:url('/images/new-home-page/checkedCheckbox.png');
}
Unfortunately, they have circles around them. I have tried to use border:none or text-decoration:none but it doesnt help. Could someone help me with this please?
They look like this now:
I would request you to use the appearance property of CSS, which is responsible for the components like this. So setting the appearance: none will make a kind of display: none to the component's appearance, which is what is needed for you. You are good to use this bit of CSS to make the component not display, while keeping the element in the view:
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
Snippet
input {
content: url('http://i.stack.imgur.com/M3EkO.png');
height: 16px;
width: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:checked {
content: url('http://i.stack.imgur.com/Ialva.png');
}
Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />
Output: http://output.jsbin.com/digebimolu/1
You must hide radio buttons and add more elements like <span> and <label>
Here is how it should work: http://jsfiddle.net/etz9Lfat/
Here is a another interesting solution, using pseudo element, where you also get rid of the surrounding focus outline.
The really good with this is it works on IE 8-11 as well, which unfortunately the better solution using appearence don't.
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
position: relative;
padding-left: 54px;
cursor:pointer;
font-size: 26px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -22px;
width:46px;
height:46px;
background: url('http://i.stack.imgur.com/M3EkO.png');
background-size: contain;
}
input[type="radio"]:checked + label:before {
background: url('http://i.stack.imgur.com/Ialva.png');
}
<input id="cb" value="1" name="cb" type="radio">
<label for="cb">Text 1</label>
<input id="cb2" value="2" name="cb" type="radio">
<label for="cb2">Text 2</label>
i would suggest a whole other solution.
input[type="checkbox"], input[type="radio"] {
display:none;
}
input[type="checkbox"] + label{
padding-left:35px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:52px; /* width of the checkbox */
height:53px; /* height of the checkbox */
margin:-1px 10px 0 -35px;
vertical-align:middle;
background:url('http://i.stack.imgur.com/M3EkO.png') left top no-repeat;
cursor:pointer;
}
/* replaces the image if checked.*/
input[type="checkbox"]:checked + label span {
background:url('http://i.stack.imgur.com/Ialva.png') left top no-repeat;
}
<input id="cb" value="" type="checkbox">
<label for="cb"><span></span> Text</label>
With this Solution you wont have any Problems in all browsers.
It will hide the checkbox itself, but it still works because you can click the label, which is connected to the checkbox.
In this label there is a span with your background image and the sizes of it. So it still looks like a checkbox and your hidden checkbox will be "checked" or "unchecked"
Add this in your css file:
input[type=radio]{
display:none;
}
Here is a simple work around to get customized radio buttons
https://jsfiddle.net/sudheer219/fj8heLcp/
Code:
[HTML]
<ul>
<li>
<input type='radio' value='1' name='radio' id='radio1'/>
<label for='radio1'><span></span>Value 1</label>
</li>
<li>
<input type='radio' value='2' name='radio' id='radio2'/>
<label for='radio2'><span></span>Value 2</label>
</li>
<li>
<input type='radio' value='3' name='radio' id='radio3'/>
<label for='radio3'><span></span>Value 3</label>
</li>
</ul>
[CSS]
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 15px;
}
input {
visibility: hidden;
}
label {
cursor: pointer;
}
input:checked+label span {
background: red;
}
span {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px inset #444;
position: relative;
top: 3px;
margin-right: 4px;
}
I am adding background image on radio button. But my issue is image is not on checked or click on radio button(background image).
Here is my code
.form-group input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label::after {
background:url('img/male.png') no-repeat -7px -81px;
width: 28px;
height: 56px; }
.gender input[type="radio"]:checked + label::before {
background:url('img/m-f-icon.png') no-repeat;
width: 28px;
height: 56px;
display: inline-block;
position: relative;
content: ' ';
margin-right: 10px;
cursor: pointer;
background-position-x: -45px;
}
<div class="form-group gender">
<label class="control-label col-xs-2">I'm a</label>
<div class="col-xs-1">
<input type="radio" class="male" name="genderRadios" value="male">
<label class="radio-inline gender"></label>
</div>
<div class="col-xs-1">
<input type="radio" class="female" name="genderRadios" value="female">
<label class="radio-inline gender"></label>
</div>
</div>
Kindly advise me any solution.
Please find demo below I have put together, this is the correct structure you should be using with the appropriate for specified on each of your labels that match the related radio button. You can switch out the background colours for background images of your choice.
JSFiddle:
https://jsfiddle.net/kdrh56md/
I am trying to customize Radio buttons on bootstrap but it is not working, When i try outside bootstrap environment in plain HTML it works, Below is code for HTML followed by CSS I am using
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
My Current AMP Policies
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Financial Planning and Retirement Advice
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
LifeCover
</label>
</div>
THE CSS
.newradio input[type=radio] {display: none;}
.newradio label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
.newradio label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 7px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 3px;
background-color: #fff;
border:solid 1px #bcb882;
}
.newradio input[type=radio]:checked + .newradio label:before {
content: "";
background: url(../../Content/images/radio-check.png);
display: inline-block;
}
The reason for .newradio is I am using that div as parent class of above given HTML, I am getting proper display of my Radios but Checked status (the image radio-check) is not showing, I tried using color change instead of background image but that doesn't work either.
Does anyone has experience in customizing radio button in bootstrap? please guide
Manoj Soni
You need to find the bootstrap css class and overwrite it. Or use ID instead of class in the css. When that also don't work try !important.
I'm trying to style my radio buttons but for some reason it's not working. If I click on the one radio button then it works but the problem comes in is when I click on another radio button. What happens is that the first one I clicked stays checked and the second one I click is also checked instead of the first one becoming unchecked.
My html
<li>
<label>* Title</label>
<div class="registration_title">
<input id="mr" type="radio" name="title[mr]" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title[mrs]" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
my css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}
Here is a jsfiddle: JSFIDDLE
The name should be same in radio buttons..
try this..
<div class="registration_title">
<input id="mr" type="radio" name="title" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
here is the FIDDLE
refer THIS to understand about radio buttons
Try to use name as common for radio buttons you used like this:
HTML:
name="title[mr]"
Demo