I want to do so, but does not work

/* fix for codepen */ div#options { width: 200px; } .ty-control-group.ty-product-options__item.product-list-field.clearfix { margin-top: 20px; } /* fix for codepen */ span.colors_block { display: inline-block; height: 30px; width: 30px; margin-right: 2px; } span.colors_block input { opacity: -1; height: 30px; width: 30px; margin: 0; } span.size_block { display: inline-block; background: rgba(158, 158, 158, 0.38); text-align: center; width: 30px; height: 19px; margin-right: 2px; vertical-align: middle; } span.size_block input { position: relative; opacity: -1; height: 19px; width: 30px; /* margin: -19px 0 0 0; */ top: -21px; left: -5px; } /* блок с размером и цветом */ div.size_block, div.colors_block { float: right; width: 123px; text-align: left; } 
 <div id="options"> <div class="cm-picker-product-options ty-product-options" id="opt_7"> <div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_7_9"> <label id="option_description_7_9" for="option_7_9" class="ty-control-group__label ty-product-options__item-label"> Цвет: </label> <div class="colors_block"> <span id="36" class="colors_block" style="background: green;"> <input type="radio" id="9_36" class="color" style="" name="9" value="36" checked="checked"> </span> <span id="37" class="colors_block" style="background: #bdbdbd; "> <input type="radio" id="9_37" class="color" style="" name="9" value="37"> </span> <span id="38" class="colors_block" style="background: rgb(189, 189, 189); display: none;"> <input type="radio" id="9_38" class="color" style="" name="9" value="38"> </span> </div> </div> <div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_7_8"> <label id="option_description_7_8" for="option_7_8" class="ty-control-group__label ty-product-options__item-label "> Размер: </label> <div class="size_block"> <span id="31" class="size_block" style=""> <span class="name_size">S</span> <input type="radio" class="size" id="8_31" style="" name="8" value="31" checked="checked"> </span> <span id="32" class="size_block" style=""> <span class="name_size">M</span> <input type="radio" class="size" id="8_32" style="" name="8" value="32"> </span> <span id="33" class="size_block" style=""> <span class="name_size">L</span> <input type="radio" class="size" id="8_33" style="" name="8" value="33"> </span> <span id="34" class="size_block" style=""> <span class="name_size">XL</span> <input type="radio" class="size" id="8_34" style="" name="8" value="34"> </span> <span id="35" class="size_block" style=""> <span class="name_size">XLL</span> <input type="radio" class="size" id="8_35" style="" name="8" value="35"> </span> </div> </div> </div> </div>

there is a demo

  • So what's the problem? - Yuri

1 answer 1

 <h2>Checkbox</h2> <div class="colors"> <input type="checkbox" class="checkbox" id="color-red"/> <label for="color-red" class="label-checkbox"> <span style="background-color: red"></span> Red </label> <input type="checkbox" class="checkbox" id="color-green"/> <label for="color-green" class="label-checkbox"> <span style="background-color: green"></span> Green </label> <input type="checkbox" class="checkbox" id="color-blue"/> <label for="color-blue" class="label-checkbox"> <span style="background-color: blue"></span> Blue </label> </div> <div class="sizes"> <input type="checkbox" class="checkbox" id="size-s"/> <label for="size-s" class="label-checkbox"> <span style="background-color: grey" data-size="S"></span> </label> <input type="checkbox" class="checkbox" id="size-m"/> <label for="size-m" class="label-checkbox"> <span style="background-color: grey" data-size="M"></span> </label> <input type="checkbox" class="checkbox" id="size-l"/> <label for="size-l" class="label-checkbox"> <span style="background-color: grey" data-size="L"></span> </label> </div> <h2>Radio group</h2> <div class="colors"> <input type="radio" class="checkbox" id="color-radio-red" name="color"/> <label for="color-radio-red" class="label-checkbox"> <span style="background-color: red"></span> Red </label> <input type="radio" class="checkbox" id="color-radio-green" name="color"/> <label for="color-radio-green" class="label-checkbox"> <span style="background-color: green"></span> Green </label> <input type="radio" class="checkbox" id="color-radio-blue" name="color"/> <label for="color-radio-blue" class="label-checkbox"> <span style="background-color: blue"></span> Blue </label> </div>

Styles

 h2 font: bold 1.15em/1 Arial margin-top: 35px .colors, .sizes width: 100% padding: 15px border: 1px solid #ccc margin-bottom: 25px input.checkbox //display: none &:checked + .label-checkbox & span opacity: 1 .label-checkbox position: relative margin-right: 15px font: .8em/1 Arial & > span opacity: .5 &:after content: ' ' display: inline-block width: 20px height: 20px &[data-size]:after content: attr(data-size) text-align: center color: #fff font: .9em/1 Arial &:hover, &:focus cursor: pointer

Here is an example of a quick sketch))

  • thank! excellent example)) - Alexey