Я пытаюсь включить в свой код тумблер, но когда я это делаю, он не поддерживает стиль (т.е. форму).Toggle Switch Losing Styling in HTML Page
Вот HTML код ниже:
<ul id="switch">
<li class="on" id="ON"><a href="#">ON</a></li>
<li class="off" id="OFF"><a href="#">OFF</a></li>
</ul>
А вот CSS:
#switch{
list-style:none;
width:85px;
height:26px;
position:absolute;
top:50%;
left:90%;
margin:-13px 0 0 -42px;
}
#switch.li{
float:left;
line-height:23px;
font-size:11px;
padding:2px 10px 0;
background: #E5E5E5;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5));
text-shadow:0 1px 0 #FFF;
border-left:1px solid #D5D5D5;
border-top:1px solid #D5D5D5;
border-bottom:1px solid #D5D5D5;
-webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3);
}
#switch.li:first-child{
-webkit-border-radius:5px 0 0 5px;
}
#switch.li:last-child{
-webkit-border-radius:0 5px 5px 0;
}
#switch.li a{
text-decoration: none;
font-family:Helvetica, Arial;
text-transform:uppercase;
color:#a1a1a1;
}
.on{
background: #505050;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#505050));
text-shadow:0 -1px 0 #444, 0 0 7px #9AE658;
border-right:1px solid #444;
border-top:1px solid #444;
border-bottom:1px solid #444;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF;
}
#switch.li:not(.on):active{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1));
}
#switch.li.on a{
color:#7BBA47;
cursor: default;
}
Таким образом, вместо того, включения и выключения бок о бок, метка ON находится на вершине OFF. Пожалуйста, помогите
Просто попробовал, и он все еще искажен. – dominicbure
@dominicbure: Я просто добавил рабочий пример к своему сообщению. Часть вашей проблемы должна заключаться в том, что в вашем исходном CSS у вас есть '# switch.li' (« элемент с id switch и class li »), тогда как вам нужно' #switch li' («элемент li, являющийся дочерним элементом элемента с переключателем id ") – TheThirdMan
Благодарим вас за помощь, что происходит в том, что это уже действующий переключатель включения/выключения, но как только я добавлю его в свой код, он потеряет свой формат. Я не знаю, зависит ли это от ресурсов (например, bootstrap cdn), но я попытался использовать разные ресурсы и все еще имею ту же проблему. – dominicbure