android - 创建纯 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

我已将 float 位置更改为绝对 float 位置，将其调整到右侧: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>