پیشنمایش زنده
کد HTML
<div class="radio-input">
<label>
<input type="radio" id="value-1" name="value-radio" value="value-1" />
<span>1</span>
</label>
<label>
<input type="radio" id="value-2" name="value-radio" value="value-2" />
<span>2</span>
</label>
<label>
<input type="radio" id="value-3" name="value-radio" value="value-3" />
<span>3</span>
</label>
<label>
<input type="radio" id="value-4" name="value-radio" value="value-4" />
<span>4</span>
</label>
<span class="selection"></span>
</div>
کد CSS
.radio-input input {
display: none;
}
.radio-input {
--container_width: 200px;
position: relative;
display: flex;
align-items: center;
border-radius: 10px;
background-color: #212121;
color: #fff;
width: var(--container_width);
overflow: hidden;
border: 2px solid #fff;
}
.radio-input label {
width: 100%;
padding: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-weight: 600;
letter-spacing: -1px;
font-size: 14px;
}
.selection {
display: none;
position: absolute;
height: 100%;
width: calc(var(--container_width) / 4);
z-index: 0;
left: 0;
top: 0;
transition: 0.15s ease;
}
.radio-input label:has(input:checked) {
color: #000;
}
.radio-input label:has(input:checked) ~ .selection {
background-color: #ffe500;
display: inline-block;
}
.radio-input label:nth-child(1):has(input:checked) ~ .selection {
transform: translateX(calc(var(--container_width) * 0 / 4));
}
.radio-input label:nth-child(2):has(input:checked) ~ .selection {
transform: translateX(calc(var(--container_width) * 1 / 4));
}
.radio-input label:nth-child(3):has(input:checked) ~ .selection {
transform: translateX(calc(var(--container_width) * 2 / 4));
}
.radio-input label:nth-child(4):has(input:checked) ~ .selection {
transform: translateX(calc(var(--container_width) * 3 / 4));
}