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

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

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

此致马修斯特拉特福德。

Answer 1

他们在这里做的很简单，但不幸的是，他们编写代码的方式使得除了作者之外的任何人都很难遵循。

我把它简化为基本概念，希望更容易理解。

这里的一般想法是利用CSS中的“相邻兄弟选择器”+来编写前一个元素是接收:checked伪类的元素时的不同样式。

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

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

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

注意：我在HTML中使用来解决a common problem with display: inline-block问题。如果您使用flexbox，则此问题不存在，我很乐意向您展示如何执行if you can support it。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

关于CSS滑动切换问题，只需查看您的演示源就可以提供很多帮助。我想你已经使用了适合web开发的浏览器，所以你只需右键点击你的演示中的小部件和＆＃34; Inspect元素＆＃34;或者命令的名称是什么。

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

关于按下提交按钮，您实际想要的不是在切换开关时按下按钮，而是调用与该按钮上的按下相关联的任何操作。或者我错了？

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

编辑顺便说一句，演示版本在<iframe>，这可能会阻碍您使用某些开发工具检查其中的DOM的能力，因此~~将其纳入帐户~~改为there。

将单选按钮转换为css开关

2 个答案: