CODEWITHSUNDEEP
javascriptcssradio-buttonbackground-color
user6619012
user6619012

Reputation:

Remove color which is present on top of Radio buttons & add border color

We are using below code to add circular background for an image. once we click on image , its working fine here

but along with image, its adding background color on top of radio buttons once we click on Radio buttons.

enter image description here

We are using same class for both Radio buttons and an image.

we dont want to display background color on top of Radio buttons L , M , S ,XL , XXL. Instead , we want to add background color for only border which covers Radio buttons.

css

.label {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: relative;
}

.label label {
    margin-top: 4px !important;
}

.product-options .input-box ul.options-list .label>label.colors { 
margin-top: 4px !important; 
left: 0; 
position: absolute; 
right: 0; 
}

.product-options ul.options-list .label { 
border: none !important; 
box-shadow: none !important; 
}

html

<span class= "label">
<label for="options_456_3">M </label>
</span>

script

jQuery(document).ready(function(){ 
var inner = Array(); 
inner = jQuery(" .product-options ul.options-list .label>label"); 
for (i=0;i<inner.length;i++){ 
var classN = inner[i].innerText;  
if (classN=="Black" || classN=="Blue"|| classN=="Red"|| classN=="White"||) {  
classN = classN.toLowerCase(); 
var urlB = "http://stylebaby.com/media/catalog/custom/"+classN+".png"; 
inner.eq(i).css('background-image', 'url(' + urlB + ')'); 
} 
} 
});

I tried using nth-child as below code. but after that it removed background- color for image also.

.product-options ul.options-list .label:nth-child(2) {
    background: none;
}

please help me, i am new to css....

Edit

with help of below code, i removed color on top of Radio buttons, now i need to add border color for Radio buttons - L, XL, M.....etc

#options-456-list > li > .label{
    background:transparent;
    }
    #options-454-list > li > .label{
    background:transparent;
    }

Upvotes: 2

Views: 446

Answers (4)

ab29007
ab29007

Reputation: 7766

Just add this to your css:

.product-options ul.options-list input[type="radio"]:checked + span label{
    border:2px solid orange;
}

Upvotes: 1

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

To remove orange border on top of L M XL

.options-list input[type="radio"]:checked + span {
    background: transparent; border:2px solid red;
}

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

You can add unique class name for these elements like "circular-bg-clr" to avoid conflict with Radio buttons L , M , S ,XL , XXL.

Something like this:

.product-options ul.options-list .label.circular-bg-clr { 
     height: 40px;
     width: 40px;
     border-radius: 50%;
     position: relative;
}

Upvotes: 0

user6619012
user6619012

Reputation:

credits : frnt for hiding color on top of Radio buttons

#options-456-list > li > .label{
    background:transparent;
    }
    #options-454-list > li > .label{
    background:transparent;
    }

Upvotes: 0

Related Questions