Стиль CSS только для чекбокса «input» в качестве переключателя и сохранения существующего «label»

Question

Как я могу (только для CSS) стилизовать input с type="checkbox" и сохранить существующий label объявленный for этот элемент ввода?

<p id="lorem-ipsum">
    <label for="dolor-sit-amet">Dolor sit amet</label>
    <input type="checkbox" id="dolor-sit-amet" name="dolor" />
</p>

Я хочу стилизоватьэлемент флажка, чтобы он имел внешний вид и поведение «перекидного переключателя».

Сохранить существующие label

Существует множество статей (пример от 2012 ), которыеопишите этот вид полного изменения внешнего вида флажка, но я не нашел такого, который позволял бы метке (как уже использовалось в приведенном выше документе) оставаться нетронутой.

По этой причине многие ответыв этот похожий вопрос StackOverflow здесь не применим.

Другими словами: я хочу сохранить элемент label в том виде, в котором он уже написан, и Я хочу получитьфлажок выполнен в виде переключателя с включенным и выключенным внутри него.

Как мне сделать это без изменения или стилизации существующего элемента label и вместо этого стилизоватьinput элемент?

Answer 1

Селекторы :before и :after могут создавать часть содержимого.Добавляя еще один элемент (например, span), который можно стилизовать так, чтобы он отображался как «ползунок» переключателя.

Затем содержащий элемент - который может быть самим label!- также может иметь селекторы :before и :after, используемые для стилизации «гнезда», в котором перемещается ползунок.

input[type=checkbox].switch {
    display: none;
}

label.switch.socket {
    position: relative;
    width: auto;
    text-indent: 6.0ex;
}
span.switch.slider {
    display: inline-block;
}
label.switch.socket span.switch.slider:before {
    content: "off";
    text-indent: 2.3ex;
    width: 5.5ex;
    height: 2.2ex;
    color: White;
    background: DimGray;
    border-radius: 5.5ex;
    position: absolute;
    left: 0;
}
label.switch span.switch.slider:after {
    content: "";
    width: 2.0ex;
    height: 2.0ex;
    background: Gainsboro;
    border-radius: 5.5ex;
    position: absolute;
    left: 0.1ex;
    top: 0.1ex;
    transition: 0.2s;
}
label.switch.socket input[type=checkbox]:checked + span.slider:before {
    content: "on";
    text-indent: 0.5ex;
    color: Black;
    background: DarkGray;
}
label.switch.socket input[type=checkbox]:checked + span.slider:after {
    left: 3.4ex;
}

<p>
    <label class="switch socket">
        <input type="checkbox" class="switch" name="lorem" />
        <span class="switch slider" />
        Lorem ipsum
    </label>

    <label class="switch socket">
        <input type="checkbox" class="switch" name="dolor" checked />
        <span class="switch slider round" />
        Dolor sit amet
    </label>
</p>

(Спасибо @ gosi123 и @aje за предложения, которые были достаточно близки, чтобы помочь мне сформулировать этот ответ.)

Answer 2

, если вы можете изменить последовательность в label и input, вот идея.Вы можете изменить цвета и добавить анимацию согласно вашему требованию.

label{
position:relative;
display:block;
width:200px;
}
label:before{
  content:'off';
  width:50px;
  height:20px;
  background:#eee;
  border-radius:50px;
  position:absolute;
  right:0
  
}
label:after{
  content:'';
  width:18px;
  height:18px;
  background:#333;
  border-radius:50px;
  position:absolute;
  right:1px;
  top:1px;
  
}
input:checked + label:before{
  content:'on';
  text-indent: 25px;
  
  
}
input:checked + label:after{
  right:29px;
  top:1px;
  
}

<p id="lorem-ipsum">
    <input type="checkbox" id="dolor-sit-amet" name="dolor" />
    <label for="dolor-sit-amet">Dolor sit amet</label>
    
</p>