javascript - 删除单选按钮顶部的颜色并添加边框颜色

Question

我们使用以下代码为图像添加圆形背景。一旦我们点击图片，它工作正常 here

但与图像一起，一旦我们点击单选按钮，它就会在单选按钮顶部添加背景颜色。

我们对单选按钮和图像使用相同的类。

我们不想在单选按钮 L、M、S、XL、XXL 上显示背景色。相反，我们只想为覆盖单选按钮的边框添加背景色。

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>

脚本

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 + ')'); 
} 
} 
});

我尝试使用 nth-child 作为下面的代码。但之后它也删除了图像的背景颜色。

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

请帮助我，我是 CSS 新手....

编辑

在下面代码的帮助下，我删除了单选按钮顶部的颜色，现在我需要为单选按钮添加边框颜色 - L、XL、M ......等

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

Answer 1

只需将此添加到您的 CSS 中:

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