Develop Reference

Is there a way to change the radio button to an image? [duplicate]

If I have a radio group with buttons:
... how can I show only images in the select option instead of the buttons, e.g.

Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label
/* HIDE RADIO */
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}
<label>
<input type="radio" name="test" value="small" checked>
<img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>
Don't forget to add a class to your labels and in CSS use that class instead.
Custom styles and animations
Here's an advanced version using the <i> element and the ::after pseudo-element:
body{color:#444;font:100%/1.4 sans-serif;}
/* CUSTOM RADIO & CHECKBOXES
http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{
display: inline-block;
vertical-align: middle;
height: 16px;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid gray;
background: gray;
}
.rad > i {
width: 16px;
border-radius: 50%;
}
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.rad > input:focus + i { /* FOCUS <i> STYLE */
outline: 1px solid blue;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
/* CHECKBOX */
.ckb > input + i::after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: gray;
}
.ckb > input:focus + i {
outline: 1px solid blue;
}
.ckb > input:checked + i::after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: orange;
}
<label class="rad">
<input type="radio" name="rad1" value="a">
<i></i> Radio 1
</label>
<label class="rad">
<input type="radio" name="rad1" value="b" checked>
<i></i> Radio 2
</label>
<br>
<label class="ckb">
<input type="checkbox" name="ckb1" value="a" checked>
<i aria-hidden="true"></i> Checkbox 1
</label>
<label class="ckb">
<input type="checkbox" name="ckb2" value="b">
<i aria-hidden="true"></i> Checkbox 2
</label>

Example:
Heads up! This solution is CSS-only.
I recommend you take advantage of CSS3 to do that, by hidding the by-default input radio button with CSS3 rules:
.options input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I just make an example a few days ago.
JSFiddle
How to use images for radio-buttons - Gist

You can use CSS for that.
HTML (only for demo, it is customizable)
<div class="button">
<input type="radio" name="a" value="a" id="a" />
<label for="a">a</label>
</div>
<div class="button">
<input type="radio" name="a" value="b" id="b" />
<label for="b">b</label>
</div>
<div class="button">
<input type="radio" name="a" value="c" id="c" />
<label for="c">c</label>
</div>
...
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px solid red;
}
jsFiddle

Keep radio buttons hidden, and on clicking of images, select them using JavaScript and style your image so that it look like selected. Here is the markup -
<div id="radio-button-wrapper">
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
</div>
and JS
$(".image-radio img").click(function(){
$(this).prev().attr('checked',true);
})
CSS
span.image-radio input[type="radio"]:checked + img{
border:1px solid red;
}

Just using a class to only hide some...based on https://stackoverflow.com/a/17541916/1815624
/* HIDE RADIO */
.hiddenradio [type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
<div class="">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

Here is a simple jQuery UI solution based on the example here:
http://jqueryui.com/button/#radio
Modified code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
<input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
</div>
</form>
</body>
</html>
jQueryUI takes care of the image background so you know which button is checked.
Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:
$('#radio3').prop('checked', true).button("refresh");

Images can be placed in place of radio buttons by using label and span elements.
<div class="customize-radio">
<label>Favourite Smiley</label><br>
<label for="hahaha">
<input type="radio" name="smiley" id="hahaha">
<span class="haha-img"></span>
HAHAHA
</label>
<label for="kiss">
<input type="radio" name="smiley" id="kiss">
<span class="kiss-img"></span>
Kiss
</label>
<label for="tongueOut">
<input type="radio" name="smiley" id="tongueOut">
<span class="tongueout-img"></span>
TongueOut
</label>
</div>
Radio button should be hidden,
.customize-radio label > input[type = 'radio'] {
visibility: hidden;
position: absolute;
}
Image can be given in the span tag,
.customize-radio label > input[type = 'radio'] ~ span{
cursor: pointer;
width: 27px;
height: 24px;
display: inline-block;
background-size: 27px 24px;
background-repeat: no-repeat;
}
.haha-img {
background-image: url('hahabefore.png');
}
.kiss-img{
background-image: url('kissbefore.png');
}
.tongueout-img{
background-image: url('tongueoutbefore.png');
}
To change the image on click of radio button, add checked state to the input tag,
.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
background-image: url('tongueout.png');
}
If you have any queries, Refer to the following link, As I have taken solution from the below blog,
http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Here is very simple example
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
background-size: 100px 100px;
height: 100px;
width: 100px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
<input type="radio" id="shipadd1" value=1 name="address" />
<label for="shipadd1"></label>
value 1
</div>
<div>
<input type="radio" id="shipadd2" value=2 name="address" />
<label for="shipadd2"></label>
value 2
</div>
Demo: http://jsfiddle.net/La8wQ/2471/
This example based on this trick: https://css-tricks.com/the-checkbox-hack/
I tested it on: chrome, firefox, safari

$spinTime: 3;
html, body { height: 100%; }
* { user-select: none; }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif;
font-size: 72px;
input {
display: none;
+ div > span {
display: inline-block;
position: relative;
white-space: nowrap;
color: rgba(#fff, 0);
transition: all 0.5s ease-in-out;
span {
display: inline-block;
position: absolute;
left: 50%;
text-align: center;
color: rgba(#000, 1);
transform: translateX(-50%);
transform-origin: left;
transition: all 0.5s ease-in-out;
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
}
&#fat:checked ~ div > span span {
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
&#fit:checked ~ div > span {
margin: 0 -10px;
span {
&:first-of-type {
transform: rotateY(90deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
}
}
}
+ div + div {
width: 280px;
margin-top: 10px;
label {
display: block;
padding: 20px 10px;
text-align: center;
transition: all 0.15s ease-in-out;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
width: 48%;
font-size: 64px;
cursor: pointer;
&:first-child {
float: left;
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child { float: right; }
}
}
&#fat:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
}
&#fit:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
&:last-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
}
}
}
<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
<label for="fat">🍕</label>
<label for="fit">💪🏼</label>
</div>

This works for me:
input[type="radio"] {
margin-right: 1em;
appearance: none;
width: 12px;
height: 12px;
background-image: url("checkbox_off.gif");
}
input[type="radio"]:checked {
background-image: url("checkbox_on.gif");
}

change style of other labels when checkbox is checked

I have an issue with the checkbox checked. I am trying to find a solution that is when my current checkbox is checked to change the opacity others checkbox. is that possible with CSS? I made it with CSS input and label. Here is my code.
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox:checked + label label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
`
desire goal is something like that
I hope you guys understand the problem. Thanks in advance

Just remove this declaration: .styled-checkbox:checked + label label and add another one .styled-checkbox.inactive + label to set opacity of "inactive" checkboxes.
After the DOM is loaded, get all checkboxes and add a click listener
If no checkbox is checked, remove 'inactive' class from all of them
If at least one checkbox is checked, add the 'inactive' class to all unchecked
window.addEventListener('load', function() {
let checks = document.querySelectorAll('.styled-checkbox');
checks.forEach(function(check) {
check.addEventListener('click', chkStyles);
});
function chkStyles() {
// Verify if there's at least one checkbox checked
let checked = document.querySelectorAll('.styled-checkbox:checked');
if(checked.length == 0) {
// No checked checkbox, remove all inactive
checks.forEach(function(check) { check.classList.remove('inactive'); });
} else {
// At least 1 is checked
checks.forEach(function(check) {
if(check.checked) {
check.classList.remove('inactive');
} else {
check.classList.add('inactive');
}
});
}
}
});
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox.inactive + label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>

Radio Input Check/Uncheck when clicked on label

I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.
The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows:
I tried looking it up stack overflow but no solutions worked.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
});
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form .radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>

What you have is all a bit less than optimal.
First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.
Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.
One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.
Don't use the click event, use change, (what if it changes via script?)
$('#customer_preferences_form')
.on('click','label', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var myradio = $(this).find('input[type=radio]');
var isChecked = myradio.is(":checked");
myradio.prop("checked",!isChecked );
myradio.trigger('setlabelstate');
});
$('#customer_preferences_form')
.on('change setlabelstate','input[type=radio]',function() {
// I used the label here to prevent the DIV sibling with title from
// having that class added - only the label siblings are needed.
var mySiblings = $(this).parent('label').siblings('label');
var radios = $(this).parent('label')
.add(mySiblings );
radios.each(function(){
var isChecked = $(this).find('input[type=radio]').is(":checked");
$(this).toggleClass("radio_checked", isChecked );
});
});
// custom event to set that initial state
$('#customer_preferences_form')
.find('input[type=radio]')
.trigger('setlabelstate');
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form label.radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customer_preferences_form">
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
</div>

Check this out it's working.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
});
$('input[type=radio]').hide();
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE : If you want to uncheck radio button if clicked again. Check below snippet
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input[type=radio]').hide();
if ($('input:checked').is(':checked')) {
$('input:checked').prop('checked', true);
$('input:checked').data('waschecked', true);
}
$('input[type="radio"]').click(function() {
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$radio.data('waschecked', false);
$radio.parent().removeClass("selected");
} else {
$radio.prop('checked', true);
$radio.data('waschecked', true);
$radio.parent().addClass("selected");
}
$radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false);
$radio.parent().siblings('label').removeClass("selected");
});
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1" > Not Interested
</label>
<label>
<input type="radio" name="mango" value="2" checked="checked"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE 2: Fixed the bug in snippet 2 reported by Junaid Saleem

progress bar change back ground when clicked and change back

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7
I made a progress bar that looks like the screenshot
and it turns to green when I hover on it.
I want to make make the bg-color changed to green
and change it back to white when I click another bar.
Please help!

I will suggest you use jquery, add click event to all <a> under element with class breadcrumb:
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
Use CSS rule active, when a tab clicked, remove all active then add class active to the one you just clicked.
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
.active {
background: #444
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
.breadcrumb {
/*centering*/
display: inline-block;
background-color: white;
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
margin-bottom: 0px;
border: 1px solid #ccc !important;
padding: 0;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after,
.breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a,
.flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
color: white;
background: #369F00;
}
.flat input[type="radio"]:checked~label {
background: #369F00;
color: white;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="breadcrumb flat">
<a href="#">
Invite a New Applicant
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="new" data-bind="checked: applicationsFilter" class="" name="ko_unique_9"> New Applicants (
<span data-bind="text: newApplicationsCount">4</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="shortlisted" data-bind="checked: applicationsFilter" name="ko_unique_10"> Shortlisted Applicants (
<span data-bind="text: shortlistedApplicationsCount">0</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="connected" data-bind="checked: applicationsFilter" name="ko_unique_11"> Connected Applicants (
<span data-bind="text: connectedApplicationsCount">0</span>)
</label>
</a>
</div>
<div class="breadcrumb flat">
<a href="#">
<label class="radio-inline" data-bind="visible: applications().length > 0">
<input type="checkbox" data-bind="checked: showHiddenApplications">
Hidden
</label>
</a>
</div>
</div>
</div>
</body>
</html>

Create multiple checkboxes using the same CSS style

I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxOne {
background: none repeat scroll 0 0 #484848;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
height: 40px;
margin: -30px 200px;
position: relative;
width: 40px;
}
.checkboxOne input[type="checkbox"]:checked + label {
background: none repeat scroll 0 0 #6E0000;
}
.checkboxOne label:before {
content:'N';
padding:6px;
color:#000000;
display: block;
padding: 4px;
text-align: center;
}
.checkboxOne input[type="checkbox"]:checked + label:before {
content:'Y';
padding:6px;
color:#FFFFFF;
display:block;
padding: 4px;
text-align: center;
}
.checkboxOne label {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
transition: all 0.5s ease 0s;
width: 30px;
z-index: 1;
}
I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:
Did you eat breakfast? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div><br>
Did you eat lunch? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2"></label>
</div><br>
Did you eat dinner? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3"></label>
</div><br>

Let's do a proper form! Sorted out what you want now.
Correct answer Look at the fiddle - http://jsfiddle.net/Wa5s8/2/
HTML
<form>
<fieldset>
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput">Did you eat breakfast?</label>
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2">Did you eat lunch?</label>
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3">Did you eat dinner?</label>
</fieldset>
</form>
A pinch of CSS:
input[type=checkbox] {
display:none;
}
label {
float: left;
clear: left;
width: 200px;
}
input[type=checkbox] + label:after
{
content: 'N';
background: #F00;
float: right;
}
input[type=checkbox]:checked + label:after
{
content: 'Y';
background: #FF0;
}

Possibly you could try:
HTML
<div class="row">
<input type="radio" /> <span>Radio title </span>
</div>
CSS:
.row{ display:block;}
.row span{margin:0 0 0 10px;}