创建一个纯 CSS3 material 切换开关

Question

我正在尝试创建一个用于混合 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 以查看实际效果。

虽然这行得通，但我有两个顾虑

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

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

Answer 1

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

关于左侧的计算，也可以避免将其定位在右侧：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>

Answer 2

从那以后，我设法找到了一个更好的解决方案，为了社区的利益，我在这里分享它。

Objective

创建一个 material 相似设计 toggle/on-off 开关
仅使用 CSS3
越轻越好
使开关响应 taps/clicks 其 body

使用的技巧

使用隐藏的 HTML checkbox 输入元素
将其后继 label 兄弟元素设置为 relative 位置 block 元素
使用绝对定位的label:before伪元素为on-off控件
创建track
使用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>

切换控件嵌入在标签本身中这一事实确保了控件在其 body 中的任何地方响应 taps/clicks。附带好处 - 更轻量级的标记。

创建一个纯 CSS3 material 切换开关

Creating a pure CSS3 material toggle switch

css

android

toggle

webview

cordova