I have been struggling to achieve the desired design for radio buttons but without success.
https://i.sstatic.net/TU7Ks.png
Despite using bootstrap for my website, I am only able to achieve this:
https://i.sstatic.net/WbzqS.png
This is the code I am currently working with:
.content {background-color: #42d5b9; padding: 50px}
.amount-landing {text-align: center;}
.amount-landing label {color: #FFFFFF;}
.amount-landing > .col-xs-2 {background: url(https://i.imgur.com/K8Nz8Y2.png) repeat-x; background-position: 0 12px;}
.amount-landing input[type="radio"] {
display:none;
}
.amount-landing input[type="radio"] + label span {
display:inline-block;
width:15px;
height:15px;
margin:0px 0px 0 0;
vertical-align:middle;
background: #FFFFFF;
cursor:pointer;
border-radius: 50%;
}
.amount-landing input[type="radio"]:checked + label span {
background: #101B27;
} <div class="content ">
<div class="form-group">
<div class="row amount-landing gray-line">
<div class="col-xs-2 col-xs-offset-1"><input type="radio"><label for="amount1"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount2"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount3"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount4"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount5"><span></span></label></div>
</div>
<!-- This shows radio buttons -->
<div class="row text-center" style="font-size: 14px;color: #FFFFFF;line-height: 14px;">
<div class="col-xs-1"></div>
<div class="col-xs-2">0$</div>
<div class="col-xs-2">1$<br>-<br>1000$</div>
<div class="col-xs-2">1001$<br>-<br>2001$</div>
<div class="col-xs-2">2001$<br>-<br>3000$</div>
<div class="col-xs-2">More than<br>3000$</div>
<div class="col-xs-1"></div>
</div>
<!-- This shows numbers -->
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Basically, the code consists of columns with radio buttons and labels to create a custom radio button. I applied a gray line (an image) to all columns in the first row to show the background line, but this method covers all of the column backgrounds. In another row, I added amount labels, which also present responsive issues when the screen size is reduced and the labels get too close together.
Your help would be greatly appreciated to guide me in the right direction. Thank you.