將單選按鈕變成CSS開關

Question

我有一個自定義控制面板生成的標記：

<div class="block" id="manage-pop3">
    <h2 class="head icon-2"><span>Manage POP3/IMAP Service</span></h2>
    <p>Here you can enable or disable the POP3/IMAP service for your account. This is used for sending mail to email clients like Outlook, therefore if POP3/IMAP is disabled, our online Webmail client will also not function.</p>
    <p class="center">
        <label><input type="radio" name="pop3_enabled" id="pop3_enabled-1" value="1" checked="checked">Enabled</label>
        <label><input type="radio" name="pop3_enabled" id="pop3_enabled-0" value="0">Disabled</label>
        <input type="submit" name="submit" id="submit" value="">
    </p>
</div>

我想將其變成單個CSS滑動開關，如下所示： http : //www.cssflow.com/snippets/toggle-switches/demo

我希望在切換開關時按下提交按鈕。

我一直在尋找，但無法繞開它。

此致，馬修·斯特拉特福德（Matthew Stratford）。

Answer 1

他們在這里做的事情很簡單，但是不幸的是，他們構造代碼的方式使除作者之外的任何人都很難遵循。

我將其分解為基本概念，希望可以更容易理解。

這里的一般想法是，當前一個元素是接收:checked偽類的元素時，利用CSS中的“相鄰兄弟選擇器” +編寫不同的樣式。

input[type=radio] + label {
 /* label styles */
}
input[type=radio]:checked + label {
 /* label styles when next to selected radio button */
}

他們從那里濫用日光離開相鄰的兄弟選擇器，以添加另一個元素，該元素在標簽文本下方滑動以指示選擇了哪個項目。 旁注：這樣做很麻煩，因為它要求您在任何地方設置固定的寬度和高度（通常是不好的做法，因為這會使響應式布局變得極其復雜）。

下面的代碼段。 如果您還想了解其他信息，請提出問題！

注意：我在HTML中使用<!-- remove whitespace -->來解決顯示的常見問題：inline-block 。 如果您使用flexbox，則不存在此問題， 如果您能支持它 ，我很樂意向您展示如何做。

 /* Broswer reset */ * { margin:0; padding:0 } /* menu base styles */ menu[role=radiogroup] { display: inline-block; background: #ddd; line-height: 40px; /* Set height */ position: relative; /* Make this the parent of absolutely positioned elements */ } /* hide radio buttons */ menu[role=radiogroup] input[type=radio] { display: none; } /* Label base styles */ menu[role=radiogroup] input[type=radio] + label { display: inline-block; width: 100px; text-align: center; position: relative; /* draw above selection indicator */ z-index: 1; /* draw above selection indicator */ transition: none; /* No delay by default */ } /* Label selected styles */ menu[role=radiogroup] input[type=radio]:checked + label { transition: 0 400ms; /* Add a delay before applying these styles */ color: white; } /* Selection indicator (blue box) default styles */ menu[role=radiogroup] .selection-indicator { background: dodgerblue; position: absolute; width: 100px; height: 40px; top: 0; transition: 400ms; /* animate changes, in this case: position */ } /* Manually set selection indicator position based on state -------------------------------------------------------------- */ /* First item selected */ menu[role=radiogroup] input[type=radio]:checked + label + input[type=radio] + label + .selection-indicator { left: 0; } /* Second item selected */ menu[role=radiogroup] input[type=radio] + label + input[type=radio]:checked + label + .selection-indicator { left: 100px; } 

 <menu role="radiogroup"> <input type="radio" name="pop3-toggle" id="pop3-enabled" checked> <label for="pop3-enabled">Enabled</label><!-- remove whitespace --><input type="radio" name="pop3-toggle" id="pop3-disabled"><!-- remove whitespace --><label for="pop3-disabled">Disabled</label> <span class="selection-indicator"></span> </menu> 

Answer 2

關於CSS滑動開關問題，僅看一下演示源就很有幫助。 我想您已經使用了適合於Web開發人員的瀏覽器，因此您可以右鍵單擊演示中的窗口小部件和“檢查元素”或命令的名稱。

實際上很容易，甚至不會顯示<input type='radio'>元素。 請改為查看<label>元素。

關於按下提交按鈕，您真正想要的不是在切換開關時按下按鈕，而是調用與該按鈕按下有關的任何操作。 還是我弄錯了？

對於表單，該操作通常是對它的submit方法的調用，但是也許您想要更多？ 在這種情況下，您將必須使用JavaScript。

編輯：順便說一句，該演示位於<iframe> ，這可能會妨礙您使用某些開發工具檢查其內部DOM的能力，因此請考慮到那里 。