CSS: переключатель переключения с скользящим фоном и метками динамической длины ⇐ CSS

[Anonymous]

Я работаю над проектом vue.js, и я пытаюсь выяснить, как воспроизвести эту кнопку Toggle из Tailgrids:
К сожалению, этот вид переключателя не является среди примеров, которые дает Tailgrids. Я также смог найти рабочий код для аналогичных коммутаторов. < /P>


* { font-family: sans-serif; }

.switchbox label {
display: inline-block;
cursor: pointer;
position: relative;
width: 70px;
height: 20px;
border: 1px solid #c1c1c1;
border-radius: 3px;
}
.switchbox label span.on,
.switchbox label span.off {
position: absolute;
top: 0;
width: 50%;
line-height: 1.4;
font-size: 12px;
font-weight: 600;
height: 16px;
padding: 2px 0;
text-align: center;
}
.switchbox span.on {
color: black;
right: inherit;
left: 0;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.switchbox span.off {
right:0;
color: black;

border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.switchbox input {
display: none;
}
.switchbox input:checked + label:before {

color: black;
}
.switchbox input:checked + label:after {

color: #737373;
}

label{
position:relative;
}

.switchbox input + label:before {
transition:0.3s;
content:""; display:block;
width:50%;
height:20px;
position:absolute;
left:0;
top:0;
background: #a5a5a5; /* W3C */
}

.switchbox input:checked + label:before {
left:50%;
}< /code>



ON
OFF

< /code>
< /div>
< /div>
< /p>
Проблема в том, что эти переключатели всегда делают цветной фон 50% от ширины переключателя. Это не работает для моего проекта, так как одна метка должна быть примерно вдвое больше другого. Но я понятия не имею, как я мог бы сделать эту работу с двумя текстами разных длины. < /P>
Любая помощь высоко ценится. Я исследую и возиться в течение примерно 2 часов, но кажется, что я просто упускаю необходимую экспертизу CSS.


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