Чистая CSS с маркировкой переключателя с элементами ширины переменной? [закрыто] ⇐ Html

[Anonymous]

Я чувствую, что это должно быть возможно, но я изо всех сил пытаюсь найти хорошую модель для того, как это сделать. Ширина и изготовление ширины таблетки 50%< /p>

Код: Выделить всё

.toggle-container {
position: relative;
width: fit-content;
border-radius: 10px;
border: 0;
background: grey;
margin: 0;
padding: 5px;
display: grid;
grid-template-columns: 1fr 1fr;
}

.toggle-container input {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}

.toggle-container label {
z-index: 2;
display: inline-block;
padding: 5px 20px;
white-space: nowrap;
text-align: center;
}

.toggle-container::before {
position: absolute;
content: "";
width: calc(50% - 10px);
height: calc(100% - 10px);
top: 5px;
left: 5px;
background: white;
border-radius: 10px;
transition: left 0.15s;
}

.toggle-container:has(input#annually:checked)::before {
left: calc(50% + 5px);
}< /code>

MonthlyAnnual (save 20%)

В идеале я хотел бы, чтобы два варианта были их естественным размером или даже обеспечить больше, чем просто два варианта - но в этом сценарии есть способ соответствовать таблеткам размера и все еще анимировать, не приспосабливаясь к Javascript?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... h-elements