dynamic css animation on radio button - html

Question

Is there a way to have the .switch__indicator cover each label without having to set a fixed width for the .switch container?
I'm using translate3d but this requires me to set the width of the container and I want to keep it dynamic.
.wrap {
display: flex;
}
.switch {
position: relative;
width: auto;
padding: 0 1rem;
}
.switch:before {
content: ' ';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 3rem;
border: 2px solid #eee;
border-radius: 30px;
}
.switch__label {
display: inline-block;
width: 2rem;
border: 3px solid;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: color 200ms ease-out;
}
.switch__indicator {
width: 4rem;
height: 4rem;
position: absolute;
top: -.5rem;
left: 0;
background: green;
border-radius: 50%;
transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
transform: translate3d(1rem, 0, 0);
}
.switch input#one:checked~.switch__indicator {
transform: translate3d(1.2rem, 0, 0);
}
.switch input#two:checked~.switch__indicator {
transform: translate3d(5.5rem, 0, 0);
}
.switch input#three:checked~.switch__indicator {
transform: translate3d(9.6rem, 0, 0);
}
.switch input#four:checked~.switch__indicator {
transform: translate3d(14rem, 0, 0);
}
.switch input[type="radio"]:not(:checked),
.switch input[type="radio"]:checked {
display: none;
}
<div class="wrap">
<div class="switch">
<input id="one" type="radio" name='thing' value='a' checked="checked" />
<label for="one" class="switch__label">One</label>
<input id="two" type="radio" name='thing' value='b' />
<label for="two" class="switch__label">Two</label>
<input id="three" type="radio" name='thing' value='c' />
<label for="three" class="switch__label">Three</label>
<input id="four" type="radio" name='thing' value='d' />
<label for="four" class="switch__label">Four</label>
<div class="switch__indicator"></div>
</div>
</div>

Answer 1

Its a bit difficult to calculate the exact space between labels as label are inline elements which have a space around them to aligned, so better to use flexbox here to remove the space and then use margin to give space between them.
Now you will need to calculate the exact translateX value which will be sum of border value, width of label and the margin value between them.
Also you don't need of translate3d here just use translateX and use calc() to calculate the exact amount of space.
.wrap {
display: flex;
}
.switch {
position: relative;
width: auto;
padding: 0 1rem;
display: flex;
}
.switch:before {
content: ' ';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 3rem;
border: 2px solid #eee;
border-radius: 30px;
}
.switch__label {
display: inline-block;
width: 2rem;
border: 3px solid;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: color 200ms ease-out;
margin-right: 4px;
}
.switch__indicator {
width: 4rem;
height: 4rem;
position: absolute;
bottom: 0;
left: 0;
background: green;
border-radius: 50%;
transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
transform: translate3d(1rem, 0, 0);
}
.switch__label:last-of-type {
margin-right: 0;
}
.switch input#one:checked~.switch__indicator {
transform: translateX(calc(1rem + 3px));
}
.switch input#two:checked~.switch__indicator {
transform: translateX(calc(5rem + 13px));
}
.switch input#three:checked~.switch__indicator {
transform: translateX(calc(9rem + 23px));
}
.switch input#four:checked~.switch__indicator {
transform: translateX(calc(13rem + 33px));
}
.switch input[type="radio"]:not(:checked),
.switch input[type="radio"]:checked {
display: none;
}
<div class="wrap">
<div class="switch">
<input id="one" type="radio" name='thing' value='a' checked="checked" />
<label for="one" class="switch__label">One</label>
<input id="two" type="radio" name='thing' value='b' />
<label for="two" class="switch__label">Two</label>
<input id="three" type="radio" name='thing' value='c' />
<label for="three" class="switch__label">Three</label>
<input id="four" type="radio" name='thing' value='d' />
<label for="four" class="switch__label">Four</label>
<div class="switch__indicator"></div>
</div>
</div>