Develop Reference

Add icon before form field

How can I add icons before the form fields?
This is how looks now:
And here how I want:
Here is css code (front.css):
body .qb-form {
width: auto;
height: auto;
}
#media (max-width: 660px) {
body .qb-form {
width: 100%;
}
}
body .qb-form h2 {
background: #3482C3;
padding: 15px 25px;
margin-bottom: 0;
color: white;
margin-top: 0;
}
body .qb-form .moreinfo {
background: #3482C3;
color: white;
padding: 0 25px 15px 25px;
margin-bottom: 15px;
}
body .qb-form label {
text-align: left;
font-size: 14px;
display: block;
padding-bottom: 0;
}
body .qb-form .qb-gdpr-label {
padding-bottom: 0;
}
body .qb-form .quickbuy_input {
height: 31px;
width: 190px;
border: 1px solid #ABADB3;
padding: 5px;
}
body .qb-form textarea {
width: 100%;
height: 60px;
border: 1px solid #abadb3;
}
body .qb-form .crow {
padding: 0 25px 25px 25px;
}
body .qb-form .buttons_wrp {
padding: 10px 25px 25px 25px;
}
body .qb-form .buttons_wrp .button {
padding: 10px 20px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: #3482C3;
overflow: hidden;
}
body .qb-form .buttons_wrp .qb-btn-submit {
padding: 10px 20px 10px 62px;
background: #3482C3 url('../img/cart-icon.png') no-repeat 15px center;
}
body .qb-form .buttons_wrp .button:hover {
background-color: #388bd1;
}
body .qb-wrp .qb-btn span {
border-bottom: 1px dashed;
}
.product-simple .qb-btn {
background: none;
color: #1F679B;
font-size: 13px;
border-bottom: 1px dashed #1F679B;
padding: 0 0 1px 0;
}
body .qb-form sup {
color: red;
font-weight: bold;
}
body .qb-form .quickbuy_errors,
body .qb-form .quickbuy_success {
margin: 0 15px;
display: none;
padding: 10px;
line-height: 1.5;
}
body .qb-form .qb-product-name {
padding: 5px;
border: 1px dashed white;
font-weight: bold;
display: inline-block;
}
body .qb-form body .qb-form_loader {
position: relative;
top: -3px;
}
body .qb-form .qb-loader {
visibility: hidden;
}
body .qb-form .qb-loader.visible {
visibility: visible;
}
.qb-form .qb-gdpr-label .qb_gdpr_wrp {
float: left;
position: relative;
top: 3px;
margin-right: 10px;
}
.qb-form .qb-btn-close {
display: none;
}
.qb-form .qb-btn-close span {
font-size: 2rem;
line-height: 0;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
position: relative;
top: -1px;
border: none;
}
.qb-gdpr-label p:last-child {
margin-bottom: 0;
}
#media (max-width: 767px) {
.qb-wrap,
#product .qb-wrap {
flex-wrap: wrap;
}
}
And here is the hook.tpl:
<div class="crow">
<label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
<input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
<input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
<input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}" />
</div>
{if $qb_gdpr}
<div class="crow">
<label class="qb-gdpr-label">
<span class="qb_gdpr_wrp">
<input type="checkbox" class="qb_gdpr" name="qb_gdpr">
</span>
{if $qb_gdpr_text}
{$qb_gdpr_text nofilter}{* HTML *}
{else}
{l s='I agree to processing of my personal data' mod='quickbuy'}
{if $qb_gdpr_link}(<a target="_blank" href="{$qb_gdpr_link|escape:'html':'UTF-8'}">{l s='read' mod='quickbuy'}</a>){/if}
{/if}
</label>
</div>
{/if}
<div class="crow quickbuy_errors error"></div>
<div class="crow quickbuy_success success"></div>
<div class="buttons_wrp">
<input type="hidden" name="qb_id_product" value="{$qb_product->id|intval}" />
<input type="hidden" name="qb_id_product_attribute" value="{$qb_product->id_product_attribute|intval}" />
<input type="hidden" name="qb_token" value="{$qb_token|escape:'html':'UTF-8'}" />
<input type="hidden" name="qb_action" value="submitQB" />
<input type="submit" class="qb-btn-submit btn btn-default button button-small" value="{l s='Buy' mod='quickbuy'}" />
<button class="qb-btn-close btn btn-default button button-small"><span>×</span> {l s='Close' mod='quickbuy'}</button>
<img class="qb-loader" src="/img/loader.gif" alt="{l s='Loading...' mod='quickbuy'}" />
</div>
</div>
</div>
</div>
I will be happy if anyone can help.
Thank you in advance.
Best regards

You can select the input fields from your HTML template by using their id's.
You you use icons8 to find the correct icons.
There you can get the Link (CDN) for each item by clicking on the download button and copy HTML.
You can paste the copied code in your HTML (just before the respective input field).
Afterwards you can style the respective item in your CSS file.
So that it has the same border and height as your input field.

Javascript select doesn't work the way I want

I have multiple selects on my site and every single one has to have his individual javascript code for it to work, which bothers me and I have no clue how I can fix it. My code handles every single select and makes it disapear after user clicks something different than select or chooses option from select. It also makes a problem where I have to make separate CSS styling for every select. Please give me some hints how to make it work.
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
var modal = document.getElementById("selected");
const optionsList = document.querySelectorAll(".option");
const selected2 = document.querySelector(".selected2");
const optionsContainer2 = document.querySelector(".options-container2");
var modal2 = document.getElementById("selected2");
const optionsList2 = document.querySelectorAll(".option2");
var offScreen = document.getElementById("add-node-window");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
selected2.addEventListener("click", () => {
optionsContainer2.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer.classList.remove("active");
});
});
optionsList2.forEach((o) => {
o.addEventListener("click", () => {
selected2.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer2.classList.remove("active");
});
});
window.onclick = function (event) {
if (event.target != modal) {
optionsContainer.classList.remove("active");
}
if (event.target != modal2) {
optionsContainer2.classList.remove("active");
}
};
const addNodeBtn = document.querySelector(".add-node-btn");
.select-box {
display: flex;
flex-direction: column;
position: relative;
}
.select-box .options-container {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box .option:hover {
background: rgb(219, 219, 219);
}
.select-box .option .radio {
display: none;
}
.select-box label {
cursor: pointer;
}
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
.select-box2 .options-container2 {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected2 {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected2::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box2 .options-container2.active + .selected2::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box2 .options-container2.active {
max-height: 240px;
opacity: 1;
}
.select-box2 .option2,
.selected2 {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box2 .option2:hover {
background: rgb(219, 219, 219);
}
.select-box2 .option2 .radio2 {
display: none;
}
.select-box2 label {
cursor: pointer;
}
<div class="select-container" id="select-container">
<div class="select-box" id="select-box">
<div class="options-container" id="options-container">
<div class="option">
<input type="radio" class="radio" id="time-asc" name="category" />
<label for="time-asc">Time ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="time-dsc" name="category" />
<label for="time-dsc">Time descending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-asc" name="category" />
<label for="reward-asc">Reward ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-dsc" name="category" />
<label for="reward-dsc">Reward descending</label>
</div>
</div>
<div class="selected" id="selected">Sort</div>
</div>
</div>
<div class="select-container2">
<div class="select-box2">
<div class="options-container2">
<div class="option2">
<input type="radio" class="radio2" id="by-user" name="category" />
<label for="by-user">By User</label>
</div>
<div class="option2">
<input type="radio" class="radio2" id="by-category" name="category" />
<label for="by-category">By Category</label>
</div>
</div>
<div class="selected2" id="selected2">Filtr</div>
</div>
</div>
</section>
strong text

As far as the CSS goes, you can modify it so that each block targets BOTH select lists instead of repeating it all:
.select-box,
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
Assuming these two select lists will always be styled the same, this will save lines of CSS, reduce the chance that you update the style of one and forget the other, and in general is a best practice when it comes to writing CSS.
I suspect your are looking to do the same type of thing with your javascript. The solution will be similar except that with js you will put the code in a function, and call the function when you are add the event listeners like this:
const selected = document.querySelector(".selected");
function toggleActive() {
this.classList.toggle("active");
}
selected.addEventListener( "click", toggleActive );
selected2.addEventListener( "click", toggleActive );
This isn't the exact code you need - but this is the approach you need to take to avoid writing the same JS multiple times.

How to change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}

function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.

This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

Close dropdown menu by removing class with jQuery

I try to close a dropdown menu and it's difficult for me. I manage to open the menu, to chose a currency and move the right label to the top of the div.
But how to close it by removing .expanded if I click anywhere (outside the div, on a label, on the top label) ? I also have to reopen if I click on the container (by toggling .expanded again)
var $container = $('.maincar__currency')
$container.click(function() {
$(this).addClass('expanded');
});
$(".maincar__currency label").click(function() {
$container.prepend($(this));
});
//$(document).click(function() {
// $container.removeClass('expanded');
//});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
font-size: 14px;
}
input {
display: none
}
.maincar__currency label {
display: flex;
width: 65px;
height: 32px;
padding: 6px;
margin-right: 0 auto;
text-align: center;
cursor: pointer;
}
.maincar__currency label:first-child::after {
content: "▾";
margin-top: -1px;
font-size: 15px;
}
.expanded {
max-height: 132px;
position: relative;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency" id="currency-drop-is">
<label for="euro-radio-is">
<div class="currency currency__euro">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked>
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
</div>

When you add an onclick event on your label, it actually triggers twice, because of the "connection" you have added between label and input. Have a look at this example:
label {
background:rgba(0,0,0,0.3);
}
input {
position:absolute;
left:10%;
top:30px;
}
<label for="test">Click me, it will select checkbox</label>
<input type="checkbox" id="test"/>
Once you fix that problem, you need to attach a click handler on the document, that will check if the actual click contains your dropdown element, and if it doesn't it will close it.
$(".maincar__currency label input[type='radio']").on("click", function (event) {
var $container = $(this).closest(".maincar__currency");
if ($container.hasClass("expanded")) {
$container.prepend($(this).closest("label"));
}
$container.toggleClass("expanded");
});
function handleDropdownClickOutside(e) {
var $container = $(".maincar__currency");
if (!$container[0].contains(e.target) && $container.hasClass("expanded")) {
$container.removeClass("expanded");
}
};
document.addEventListener("mousedown", handleDropdownClickOutside, false);
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
/* margin-left: auto; */
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
font-size: 14px;
width: 64px;
}
input {
display: none;
}
.maincar__currency label {
display: flex;
width: 100%;
height: 32px;
padding: 6px;
margin-right: 0 auto;
text-align: center;
cursor: pointer;
}
.maincar__currency label:first-child::after {
content: "▾";
margin-top: -1px;
font-size: 15px;
}
.expanded {
max-height: 132px;
position: relative;
right: 0;
}
/* Visual purpose only: */
.maincar__currency {
border:1px solid red;
}
.maincar__currency label {
border:1px solid black;
}
.maincar__currency input {
display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency" id="currency-drop-is">
<label for="euro-radio-is">
<div class="currency currency__euro">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked>
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
</div>
So the way I did it, you only want to update/prepend the value, if the container has the .expanded class, otherwise clicking on the radio will open the dropdown.

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