删除单选按钮和顶部上方的颜色。添加边框颜色

Question

我们使用下面的代码为图像添加循环背景。一旦我们点击图片，其工作正常here

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

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

我们不希望在单选按钮L，M，S，XL，XXL 之上显示背景颜色。相反，我们只想为仅包含单选按钮的边框添加background color。

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;
}

Answer 2

信用：frnt用于在单选按钮上隐藏颜色

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

Answer 3

您可以为这些元素添加唯一的类名称，例如“circular-bg-clr”，以避免与单选按钮L，M，S，XL，XXL发生冲突。

这样的事情：

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

Answer 4

删除L M XL顶部的橙色边框

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