将单选按钮转换为 css 开关

Turning radio buttons into a css switch

本文关键字：css 开关 转换 单选按钮      更新时间：2023-09-26

我有一个自定义控制面板生成的标记：

<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

我希望在切换开关时按下提交按钮。

我一直在寻找，但就是无法理解它。

问候马修·斯特拉特福德。

他们在这里所做的非常简单，但不幸的是，他们构建代码的方式使得除了作者之外的任何人都很难理解。

我把它分解成一个基本概念，希望更容易理解。

这里的总体思路只是利用 CSS 中的"相邻同级选择器"+在前一个元素是接收:checked伪类的元素时编写不同的样式。

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

从那里，他们滥用相邻同级选择器中的生活日光，以添加另一个在标签文本下滑动的元素，以指示选择了哪个项目。旁注：这样做是地狱般的麻烦，因为它要求您在任何地方设置固定的宽度和高度（通常是不好的做法，因为它使响应式布局非常复杂）。

下面的代码片段。如果您还有其他想知道的事情，请提出问题！

注意：我正在使用 HTML 中的<!-- remove whitespace -->来解决显示的常见问题：内联块。如果您使用 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>

关于CSS滑动开关问题，只需查看演示的来源就会有很大帮助。我想你已经使用了适合 Web 开发的浏览器，所以你可以右键单击演示中的小部件和"检查元素"或任何命令的名称。

这实际上很容易，甚至没有显示<input type='radio'>元素。请改为查看<label>元素。

关于提交按钮按下，您真正想要的不是在切换开关时按下按钮，而是调用与按下该按钮相关的任何操作。还是我弄错了？

对于表单，该操作通常是对其submit方法的调用，但也许您想要更多？在这种情况下，你必须使用 JavaScript。

编辑：顺便说一下，演示在一个<iframe>中，这可能会阻碍您使用某些开发工具检查其中的 DOM 的能力，因此请考虑去那里。

相关文章：