Как сделать отзывчивый бокс для товара?

Question

[steef08]

Нужна помощь, хочу сделать подобие стиля выбора товара как у эппл.
Посмотрел как сделано у эппл (через input и label), половину сделал, но столкнулся с проблемой отзывчивости для планшетов и телефонов, а именно требуется чтобы сверху выводилась картинка, а снизу инпуты с выбором цвета - как на скриншоте. Идеально было бы сделать раздельные div-ы для импутов и картинки. Возможно я намудрил с кодом и решается это намного проще, но горшочек уже не варит. Буду благодарен если поможете, заранее Спасибо!
з.ы Не обращайте внимание на центровку синих кружков, в WordPress они по центру.

<input type='radio' name='col' id='black'><label for='black'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/black.png"></label>
    <input type='radio' name='col' id='wite'><label for='wite'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/White.png"></label>
    <input type='radio' name='col' id='beziviu'><label  for='beziviu'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/MWYM2_SW_COLOR1.png"></label>
     <input type='radio' name='col' id='red'><label for='red'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/red.png"></label>
    <input type='radio' name='col' id='blue' checked><label for='blue'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/blue.png"></label>
    <input type='radio' name='col' id='green'><label for='green'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/beruzoviu.png"></label>
    <input type='radio' name='col' id='orenge'><label for='orenge'><img class='imgitem' src="https://irespawn.ru/wp-content/uploads/2020/08/orange.png"></label>
    
<figure class='imgbox'></figure>

.imgbox{
  display: block;
  width:100%;
  height:550px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;


}
.chooseitem {
    display: block;
    margin: 0 auto;
}


.imgitem {
display: inline-block;
}

input{ 
    display: none!important;
}

label{
    border: 1px solid transparent;
    padding-bottom: 9px;
    padding-top: 6px;
    padding-right: 1px;
    padding-left:1px;
    cursor: pointer;
}



/*-----------------------*/

input#beziviu:checked + label{
    border: 1px solid #0070c9;
    border-radius:50px;
}
input#blue:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}
input#red:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}
input#green:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}
input#orenge:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}
input#black:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}
input#wite:checked + label{ 
    border: 1px solid #0070c9;
    border-radius: 50%;
}


/*-----------------------*/

input#beziviu:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYM2.jpg');
}
input#blue:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYR2.jpg');
}
input#red:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYH2.jpg');
}
input#green:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYP2.jpg');
}
input#orenge:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYQ2.jpg');
}
input#black:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYN2.jpg');
}
input#wite:checked ~ figure{
    background-image: url('https://irespawn.ru/wp-content/uploads/2019/12/MWYL2.jpg');
}

Comments

[Ankhena]

в коде:
блок карточки товара
в нем
вначале инпуты россыпью (они скрыты, так что без разницы)
блок с лейблами
блок с картинкой

Если нужно чтобы на мобилках сначала была картинка, а потом лейблы, то используете order.

p.s.
Делать одноцветные кругляшки картинками - изврат. Это решается фоновым цветом и внутренней тенью.

p.p.s
input#black а что, есть элемент с таким же id, но не инпут?
А для figure и label'ам задайте классы.
#black:checked ~ .figure {}

[steef08]

p.s.
Делать одноцветные кругляшки картинками - изврат. Это решается фоновым цветом и внутренней тенью.

Понимаю) На оф. сайте эппл реализовано так же (через картинки)

блок карточки товара

Как только оборачиваешь в див любой из объектов, будь то label или картинку все рушится и не выводится картинка.
Я ее задал как БГ а можно сделать вывод боксом с картинкой и как?

[steef08]

Не пашет(

[Ankhena]

steef08,

вначале инпуты россыпью

А вы засунули их в обертку.

И почитайте про соседние + и родственные ~ селекторы.

Естественно, если инпуты, лейблы и блок находились на одном уровне, а потом вы лейблы сложили в обертку, то нужно поменять селекторы.