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

Question

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

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

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

我们不想在 单选按钮 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

学分：frnt 用于隐藏单选按钮顶部的颜色

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

Answer 2

您可以为这些元素添加唯一的 class 名称，例如 "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 3

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

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

Answer 4

只需将此添加到您的 css:

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

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

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

javascript

css

background-color

radio-button