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