Hey everyone, I'm currently working on creating radio buttons similar to the one shown in this image. Could you please provide me with some guidance on styling the radio buttons and drawing the connecting line between them? Thank you for all your help. This is for my website and I want to achieve the same effect. I am facing difficulty with just this aspect so any suggestions are welcome.
/* Styling for dog photo background */
.sizeVisual-image {
background-color: #00263e;
}
/* Hover effect for label text */
ul li:hover label {
color: #f2a900;
}
/* Selected label color */
input[type=radio]:checked ~ label {
color: #f2a900;
}
/* Horizontal layout for radio buttons */
.radioGroup {
display: flex;
background-color: #00263e
}<body>
<!-- INSERT IMAGE -->
<div class="sizeVisual-image">
<img class="img img_larger" src="//cdn.shopify.com/s/files/1/1577/4333/files/Fit-Guide-Measurement-Girth.svg?v=3289972504356902595" width="400" height="300" alt="">
</div>
<!-- END INSERT IMAGE -->
<!-- Create a radio button set for size options -->
<fieldset>
<legend class="isVisuallyHidden">Select Size</legend> <!-- Title of the button set -->
<ul class="radioGroup radioGroup_scale"> <!-- List of buttons -->
<!-- XXSMALL button -->
<li>
<input type="radio" name="size" id="xxsmall" value="XXSmall" class="radio-input isVisuallyHidden js-product-size" checked="">
<label class="radio radio_size" for="xxsmall">
<span class="radio-inner_size"><span></span></span>
<div class="set">
<div #FF0000class="set-hd">
<div class="radio-text_size">
XXSmall
</div>
</div>
<div class="set-bd">
<div class="radio-text_size isHiddenTablet">
13-17 in (33-43 cm)
</div>
</div>
</div>
</label>
</li>
<!-- End of XXSMALL button -->
<!-- XSMALL button -->
<li>
<input type="radio" name="size" id="xsmall" value="XSmall" class="radio-input isVisuallyHidden js-product-size">
<label class="radio radio_size" for="xsmall">
<span class="radio-inner_size"><span></span></span>
<div class="set">
<div class="set-hd">
<div class="radio-text_size">
XSmall
</div>
</div>
<div class="set-bd">
<div class="radio-text_size isHiddenTablet">
17-22 in (43-56 cm)
</div>
</div>
</div>
</label>
</li>
<!-- End of XSMALL button -->
<!-- SMALL button -->
<li>
<input type="radio" name="size" id="small" value="Small" class="radio-input isVisuallyHidden js-product-size">
<label class="radio radio_size" for="small">
<span class="radio-inner_size"><span></span></span>
<div class="set">
<div class="set-hd">
<div class="radio-text_size">
Small
</div>
</div>
<div class="set-bd">
<div class="radio-text_size isHiddenTablet">
22-27 in ( 56-69 cm)
</div>
</div>
</div>
</label>
</li>
<!-- End of SMALL button -->
<!-- MEDIUM button -->
<li>
<input type="radio" name="size" id="medium" value="Medium" class="radio-input isVisuallyHidden js-product-size">
<label class="radio radio_size" for="medium">
<span class="radio-inner_size"><span></span></span>
<div class="set">
<div class="set-hd">
<div class="radio-text_size">
Medium
</div>
</div>
<div class="set-bd">
<div class="radio-text_size isHiddenTablet">
27-32 in (69-81 cm)
</div>
</div>
</div>
</label>
</li>
<!-- End of MEDIUM button -->
<!-- XLARGE button -->
<li>
<input type="radio" name="size" id="large-xlarge" value="Large/XLarge" class="radio-input isVisuallyHidden js-product-size">
<label class="radio radio_size" for="large-xlarge">
<span class="radio-inner_size"><span></span></span>
<div class="set">
<div class="set-hd">
<div class="radio-text_size">
Large/XLarge
</div>
</div>
<div class="set-bd">
<div class="radio-text_size isHiddenTablet">
32-42 in (81-107 cm)
</div>
</div>
</div>
</label>
</li>
<!-- End of XLARGE button -->
</ul>
</fieldset>
<!-- End of radio button set for size options -->
</body>