我正在开发平板电脑的网络应用程序,我为我的复选框设计了一组div和标签,以便它看起来像一个开关。 (JsFiddle here.)
在iPad 2和iPad上工作正常3,但是当我在三星Galaxy Tab 2 上观看它时,它只会在我将平板电脑从纵向转为横向或反之时改变状态
我也尝试过没有过渡,但仍然是同样的问题。
有没有办法可以在没有Javascript的情况下获得我想要的效果?
我不会让我只是链接到jsfiddle,所以这里是代码:
HTML:
<label class="switch" for="test">
<input type="checkbox" id="test">
<div class="track">
<div class="knob"></div>
</div>
</label>
CSS:
label.switch > .track {
width: 80px;
height: 52px;
border-radius: 60px;
box-shadow: 0 1px 3px black inset, 0 -1px 1px rgba(255,255,255,0.15);
/*border: 5px solid #666;*/
display:inline-block;
cursor:pointer;
background: #333;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
transition: background .5s;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
}
label.switch > .track > .knob {
height: 54px;
width: 54px;
border-radius: 50px;
margin-top:-1px;
box-shadow: 0 2px 3px black, 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 5px rgba(237,237,237,1) inset;
transition: margin-left .25s;
-webkit-transition: margin-left .25s;
-moz-transition: margin-left .25s;
-o-transition: margin-left .25s;
-ms-transition: margin-left .25s;
background: rgb(191,191,191);
background: -moz-linear-gradient(top, rgba(191,191,191,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,191,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
}
label.switch > input {
display:none;
}
label.switch > input:checked ~ .track {
background: #D96200
}
label.switch > input:checked ~ .track > .knob {
margin-left:26px;
}
答案 0 :(得分:0)
Android平板电脑(至少三星Galaxy Tab 2)附带旧版Chrome作为其默认浏览器。
此浏览器无法识别general sibling selector(~
)。这就是动画无效的原因。
解决方案是更改adjacent sibling selector(+
)的所有普通兄弟选择器。