Я хочу вставить текст ВКЛ / ВЫКЛ на свой тумблер. Когда ползунок включен, должен отображаться текст «ON», а когда ползунок выключен, должен отображаться текст «OFF». Они должны отображаться внутри переключателя. Пожалуйста помоги.

.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
}
.cm-toggle:after {
    content: '';
    width: 35px;
    height: 20px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}
.cm-toggle:before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.cm-toggle:checked:before {
    left: 20px;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

.cm-toggle:checked:after {
    background: #3895D3;
}
<input class='cm-toggle' type='checkbox' checked>
1
kavya 3 Сен 2020 в 10:55

2 ответа

Лучший ответ

Вы можете сделать это следующим образом:

.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
}
.cm-toggle:after {
    content: '';
    width: 35px;
    height: 20px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}
.cm-toggle:before {
    content: 'off';
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease-in-out;
}
.cm-toggle:checked:before {
    left: 20px;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
    content: 'on';
}

.cm-toggle:checked:after {
    background: #3895D3;
}
<input class='cm-toggle' type='checkbox' checked>
2
dantheman 3 Сен 2020 в 08:04

Добавь это

.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
}
.cm-toggle:after {
    content: '';
    width: 35px;
    height: 20px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}
.cm-toggle:before {
    /* Modification */
    content: 'OFF';
    text-indent: 38px;
    /* END */
    vertical-align: middle;
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.cm-toggle:checked:before {
    /* Modification */
    content: 'ON';
    text-indent: 18px;
    /* END */
    left: 20px;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

.cm-toggle:checked:after {
    background: #3895D3;
}
<input class='cm-toggle' type='checkbox' checked>
0
local dev 3 Сен 2020 в 08:07