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（从另一个状态向左覆盖）

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

我已经设法找到一个更好的解决方案，我在这里为了社区的利益而分享。

目标

创建一个材质设计相似的切换/开关开关
仅使用CSS3
尽可能轻量化
使开关响应其身体内任何位置的点击/点击

使用的技巧

使用隐藏的HTML checkbox输入元素
将其后继label兄弟作为relative定位block元素的样式
使用绝对定位的label:before伪元素为开关控件创建曲目
使用label:after伪元素为控件创建滑块
使用input:checked伪元素使控件响应

代码

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

创建纯CSS3材质切换开关

2 个答案: