CSS 將偽元素轉換為 class 名稱

Question

我有一個使用偽類創建的 ios 樣式的開關按鈕。 我希望將此處的活動偽 class 轉換為正常.active class 以便我可以在 PHP 中使用它來使用“echo”激活按鈕，例如if...else if(condition) { echo "active"; } if(condition) { echo "active"; } 。 這里的問題是我無法理解如何更改我的交換機的 css 來實現這一點。 恐怕我現在會毀掉正在工作的 CSS。

 .tgl { display: none; }.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl +.tgl-btn { box-sizing: border-box; }.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl +.tgl-btn::-moz-selection { background: none; }.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl +.tgl-btn::selection { background: none; }.tgl +.tgl-btn { outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.tgl +.tgl-btn:after, .tgl +.tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; }.tgl +.tgl-btn:after { left: 0; }.tgl +.tgl-btn:before { display: none; }.tgl:checked +.tgl-btn:after { left: 50%; }.tgl-ios +.tgl-btn { background: #fbfbfb; border-radius: 2em; padding: 2px; transition: all 0.4s ease; border: 1px solid #eee; }.tgl-ios +.tgl-btn:after { border-radius: 2em; background: #fbfbfb; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); }.tgl-ios +.tgl-btn:hover:after { will-change: padding; }.tgl-ios +.tgl-btn:active { box-shadow: inset 0 0 0 2em #fd267d; }.tgl-ios +.tgl-btn:active:after { padding-right: 0.8em; }.tgl-ios:checked +.tgl-btn { background: linear-gradient(to left, #ff7854 30%, #fd267d 100%); }.tgl-ios:checked +.tgl-btn:active { box-shadow: none; }.tgl-ios:checked +.tgl-btn:active:after { margin-left: -0.8em; }

 <form action="processes/settings.php" method="post"> <input class="tgl tgl-ios singleActions" id="cb2" type="checkbox"/> <label class="tgl-btn float-right" for="cb2"></label> </form>

Answer 1

編輯：我知道你在追求什么。 這不是 css 問題。 只需將“已檢查”作為屬性添加到輸入字段即可。 然后將應用 styles