Удалить цвет, который присутствует в верхней части кнопок радио и добавить цвет границы

Мы используем под кодом, чтобы добавить круговой фон для изображения. как только мы нажимаем на изображение, его рабочий вид 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 как указано ниже. но после этого он также удалил background-color для изображения.

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

источник

2017-01-23 Anonymous

это вы хотите добавить цвет границы к параметрам размеров, например, вы добавляете в цветную опцию, когда пользователь нажимает на нее –

@arsh_kalsi абсолютно прав, все, что я хотел, - это добавить цвет границы на для границы для L, M, XL .... как показано ниже изображения ...... –

присоединяйтесь сюда http://chat.stackoverflow.com/rooms/info/133852/yang-yin?tab=general –

Просто добавьте в ваш CSS:

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

источник

2017-01-24 06:05:18 ab29007

кредитов: frnt для сокрытия цвета на верхней части кнопки радио

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

источник

2017-01-23 18:35:20

Вы можете добавить уникальное имя класса для этих элементов, как "круговой-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; 
}

источник

2017-01-24 05:31:42

Спасибо, я проверю и дам вам знать ..... –

Поскольку мы не записываем html-код для 'L, M, S' статически, эти значения идут динамически с использованием php, поэтому я не думаю, что мы можем добавлять классы для всех' L, M, S ..... ', can вы поможете мне только css с существующими классами ..... –

Прямо сейчас ваши существующие классы недостаточно хороши, чтобы различать элементы. Вы можете использовать идентификатор «# options-456-list», чтобы различать эти элементы как текущую структуру HTML, например: «.product-options # options-455-list span.label». –

Чтобы удалить оранжевую границу сверху LM XL

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

источник

2017-01-24 05:57:28

Спасибо за ваше драгоценное время ..... –

Удалить цвет, который присутствует в верхней части кнопок радио и добавить цвет границы

ответ

Смежные вопросы