Создание чистых переключателей для материала CSS3

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-гибридного webapp, я обеспокоен тем, что более ранние версии Android WebView могут не понимать calc.

Я был бы очень признателен всем, кто мог бы предложить несколько улучшений или альтернатив здесь.

Answer 1

Я так удался для разработки лучшего решения, которое я разделяю здесь в интересах сообщества.

Объективный

• Создать переключатель материала дизайн Двойник тумблер/вкл-выкл
• использование только CSS3
• как можно более
• сделать выключатель, реагирующий на кранах/щелкает в любом месте в пределах его органа

трюки используются

• Используйте скрытый HTML checkbox элемент ввода

• Стиль его преемник label родственный, чтобы быть relative LY позиционируется 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>

Тот факт, что управление тумблером встроено внутри самой этикетки, гарантирует, что элемент управления реагирует на краны/клики в любом своем теле. Дополнительное преимущество - более легкая разметка.

Answer 2

Я изменил положение поплавка на абсолютное, отрегулировав его вправо: 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>