纯css生成下拉菜单三角形_使用开/关FlipSwitch生成器生成纯CSS3切换按钮-CSDN博客

如果您讨厌使用按钮来打开或关闭某物，则可能会在翻盖开关中发现新鲜空气。如今，随着Web开发的非常出色的改进，像在移动操作系统中看到的一样，创建On / Off翻转开关非常容易。您只需要合适的工具即可。

引入了Web应用程序On / Off FlipSwitch Generator ，它将帮助您轻松地为自定义On / Off按钮创建任何类似于移动OS的样式。该按钮还与大多数现代网络浏览器兼容：Chrome，Firefox，Safari，Opera，IE9，Android和iOS。

入门

开/关FlipSwitch Generator具有一个非常简单直观的界面。当您更改可用输入时，还可以使用实时预览来显示结果样式。让我们来看看。

如下面的屏幕截图所示， On / Off FlipSwitch Generator带有6个主要输入选项：样式，活动状态，非活动状态，开关，标签和大小。

在“ 样式”部分中，您可以从iOS4 / 5，Android和Windows 8中选择所需的按钮样式。“自定义”选项可让您从头开始构建按钮。

下面有两个有用的链接： 随机样式用于生成随机按钮。 重置为默认状态时 ，用于重置您从其他输入所做的所有更改。

在此下方，可以看到处于活动状态和非活动状态的按钮外观。在各部分中，您将使用背景色，文本颜色和按钮的文本标签。您可以将文本标签从“打开”和“关闭”更改为完全不同的内容，例如“静音”或“取消静音”。

开关输入可帮助您操纵开关样式。在这里，您可以调整开关大小，开关背景和边框颜色以及翻转开关的默认位置。对于“ 双开关颜色” ，您可以在单独的翻转位置上选择要更改的开关颜色。

标签样式也可以自定义：字体大小和文本间距；以及按钮大小：宽度，高度和边框半径。

取得按钮

对您创建的样式满意吗？现在，让我们获取代码，以便将其应用于您的网站或产品。向下滚动以查看所创建按钮的结果代码。这些代码以CSS和HTML格式提供，只需点击“ 复制到剪贴板”链接即可复制内容并使用按钮。

启用IE支持

在页面上，提到IE6-8不支持在页面上生成的开关。但是，有一个带有少量javascript代码的解决方案（由On / Off FlipSwitch Generator团队之一anna.mi提供给您）。

要在IE8中启用支持，您需要做的就是添加一些CSS代码，该代码将根据.onoffswitch-checked类更改按钮状态，如下所示。

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

然后，要在.onoffswitch-checked类时切换它，请在页面中添加以下Javascript：

<script>
$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});
</script>

如果选择了“默认情况下打开”选项，请不要忘记将.onoffswitch-checked类也包含到您的html中，如下所示

<div class="onoffswitch onoffswitch-checked">

最终思想

请检查一下，并让我们知道翻转开关生成器是否正常运行而没有错误。我们只能运行这么多组合，但是到了最后，如果编码超出了您的能力范围，则可以从这个方便的工具开始，然后再进行进一步的开发。让我们知道您的想法。

翻译自: https://www.hongkiat.com/blog/on-off-flip-switch-generator/