创建一个纯 CSS3 材质切换开关答案

【问题标题】：Creating a pure CSS3 material toggle switch创建一个纯 CSS3 材质切换开关
【发布时间】：2017-01-12 17:00:09
【问题描述】：

我正在尝试创建一个用于混合 Android 应用程序的轻量级切换开关 - 以代替我目前依赖脚本来传递其魔力的工作。这是我迄今为止所取得的成就

.onoffBox
{
 text-align:left !important;
 padding:0.5em;
}

.onOffBox > span
{
 display:inline-block;
 width:90vw;
 text-align:left !important;
 color:white;
}

.inpOnOff
{
 display:none;
}

.inpOnOff + label
{
 width:10vw;
 float:right;
 background-color:silver;
 border-radius:3vw;
 height:3vw;
 padding:0;
 margin:0;
 position:relative;
}

.inpOnOff + label:before
{
 padding:0;
 margin:0;
 background-color:white;
 content:'';
 border-radius:5vw;
 height:5vw;
 width:5vw;
 position:absolute;
 left:0;
 top:-1vw;
}

.inpOnOff:checked + label{background-color:aqua;}
.inpOnOff:checked + label:before
{
 left:calc(100% - 5vw);
 background-color:aqua;
}
body{background-color:black;}

<div class='onOffBox'>
<span>Hide Hints</span>
 <input id='inpHideHints' class='inpOnOff' type='checkbox'/>
 <label for='inpHideHints' id='lblHideHints'></label>
</div>

查看this fiddle 以了解实际情况。

虽然这可行，但我有两个担忧

我对@987654323@ 一直不太满意，所以我不确定我在这里的用法是否正确
您会注意到，在input:checked 状态下，我使用CSS calc 来定位label:before 伪元素的左侧。鉴于所有这些都是针对 Android 混合网络应用程序，我担心早期版本的 Android WebView 可能无法理解calc。

如果有人可以在这里提出一些改进或替代方案，我将不胜感激。

【问题讨论】：

标签： android css cordova webview toggle

【解决方案1】：

我已将浮动位置更改为绝对位置，将其调整为右：0px（或您喜欢的任何值）并设置边距。（这点取决于您）。

关于左侧的计算，也可以避免将其定位为 right: 0px （并从其他状态覆盖左侧）

.onoffBox
{
 text-align:left !important;
 padding:0.5em;
}

.onOffBox > label
{
 display:inline-block;
 width:90vw;
 text-align:left !important;
 color:white;
}

.inpOnOff
{
 display:none;
}

.inpOnOff + span
{
 width:10vw;
 background-color:silver;
 border-radius:3vw;
 height:3vw;
 padding:0;
 margin: 10px;
 position: absolute;
  right: 0px;
}

.inpOnOff + span:before
{
 padding:0;
 margin:0;
 background-color:white;
 content:'';
 border-radius:5vw;
 height:5vw;
 width:5vw;
 position:absolute;
 left:0;
 top:-1vw;
}

.inpOnOff:checked + span{background-color:aqua;}
.inpOnOff:checked + span:before
{
 left: initial;
  right: 0px;
 background-color:aqua;
}
body{background-color:black;}

<div class='onOffBox'>
<label for='inpHideHints'>Hide Hints</label>
<input id='inpHideHints' class='inpOnOff' type='checkbox'/>
<span id='lblHideHints'></label>
</div>

【讨论】：

谢谢！有没有办法以某种方式使用pointer-events 魔法来使整个事物响应任何地方的点击/点击，即甚至在 l.h.s 上的文本上 - 在这个例子中隐藏提示？
这是标签的标准行为...我已将标签更改为跨度，反之亦然，现在它可以按您的意愿工作

【解决方案2】：

此后，我设法制定了一个更好的解决方案，我在此分享，以造福社区。

目标

创建类似 Material Design 的切换/开关
仅使用 CSS3
尽可能轻量级
使开关响应其主体内任意位置的点击/点击

使用的技巧

使用隐藏的 HTML checkbox 输入元素
将其后继 label 兄弟设置为 relatively 定位 block 元素
使用绝对定位的label:before伪元素为开关控制创建轨道
使用label:after 伪元素为控件创建滑块
使用input:checked 伪元素使控件具有响应性

代码

body{background-color:black;font-family:arial}
.inpOnOff{display:none;}
.inpOnOff + label
{
 display:block;
 position:relative;
 margin:1vw;
 margin-bottom:1em;
 color:white !important;
}
.inpOnOff + label:before
{
 content:''; 
 position:absolute;
 right:0;
 width:10vw;
 height:5vw;
 border-radius:5vw;
 background-color:silver;
}
.inpOnOff + label:after
{
 content:''; 
 position:absolute;
 right:5vw;
 height:5vw;
 width:5vw;
 border-radius:5vw;
 background-color:white;
 z-index:100;
}
.inpOnOff:checked + label:before{background-color:white;}
.inpOnOff:checked + label:after
{
 right:0;
 background-color:blue;
}

<input class='inpOnOff' id='inpHideHint' type='checkbox'/>
<label for='inpHideHint'>Hide Hint</label>

切换控件嵌入标签本身的事实确保控件能够响应其主体内任何地方的点击/点击。附带的好处 - 更轻量级的标记。

【讨论】：