I am trying to create a custom switch as shown in the image below. 
I wrote the code and was able to achieve the correct style, but could not make a shortcut in front of the radio buttons.
.lengend-action-buttons { float: left; margin-left: 10px; margin-top: 10px; } label { font-weight: normal; font-size: 14px; Font-Family: Metric-Regular; Color: #666666; display: block; cursor: pointer; } [type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } [type="radio"] + span:before { content: ''; display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.10em; border-radius: 1em; border: 0.35em solid #fff; box-shadow: 0 0 0 0.10em #36B18D; margin-right: 0.75em; transition: 0.5s ease all; } [type="radio"]:checked + span:before { background: #36B18D; box-shadow: 0 0 0 0.10em #36B18D; } [type="radio"]:focus + span::after { font-size: 1.2em; line-height: 1; vertical-align: -0.125em; }
<div class="lengend-action-buttons lengend-action-buttons-first"> <label for="d3_graph_chart0011day"> <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> <span>1 Day</span> </label> </div> <div class="lengend-action-buttons lengend-action-buttons-first"> <label for="d3_graph_chart0017day"> <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> <span>7 Day</span> </label> </div> <div class="lengend-action-buttons lengend-action-buttons-first"> <label for="d3_graph_chart00130day"> <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> <span>30 Day</span> </label> </div> <div class="lengend-action-buttons lengend-action-buttons-first"> <label for="d3_graph_chart00190day"> <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> <span>90 Day</span> </label> </div>
Please help me solve this problem.
source share