復選框“ input”作為翻轉開關的純CSS樣式，並保留其現有的“ 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元素保持已寫的狀態， 並且要使復選框的樣式像翻轉開關一樣，其中帶有“ on”和“ off”。

如何在不更改或設計現有label元素的情況下，而是在對input元素進行樣式化的情況下做到這一點？

Answer 1

如果您可以更改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> 

Answer 2

: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提供的建議足夠接近，可以幫助我制定此答案。）