我们可以将文字放在＆＃34;开/关＆＃34;使用HTML5时类似的开关？

Question

iOS7有一种非常好的开关风格，如下所示：

我认为这是一种有效且高效的设计。 HTML5切换似乎只允许我们放置这样的文本：

我确实在这里找到了一些替代解决方案：http://colintoh.com/css3-flip-switch

嗯，替代解决方案不是＆＃34;切换＆＃34;而是风格的div动画。它们的工作方式与开关略有不同，＆＃34;更重要的是，我喜欢开关左右移动并保持文本在顶部（非常好的指示器/导航器，用于在两页之间切换）。

Answer 1

HTML5没有任何类型的原生＆＃39;切换，如果这就是你的要求，解决方案将始终是css样式divs /跨度等，与CSS的样式和潜在的动画和/或javascript添加效果/行为，。这当然为您提供了创建任何类型的开关设计的全部功能，所以我至少会尝试一些东西，另一个例子here，但您可能想要this或this我注意到你第一次切换设计，只选择iOS one / s

相关问题here

Answer 2

您正在寻找的是“拨动开关”，您可以在此处下载：http://ghinda.net/css-toggle-switch/

下载后，您可以将其放入HTML：

<label>View</label>
<div class="switch-toggle switch-candy">
    <input id="textA" name="view" type="radio" checked>
    <label for="textA" onclick="">textA</label>

    <input id="textB" name="view" type="radio">
    <label for="textB" onclick="">textB</label>

    <a>Switch Link Here</a>
</div>