Добавление переключателя checkbox в CSS

Я пытаюсь создать флажок, который выглядит как переключатель, используя только CSS, и сохраняя как можно больше, используя em, так что его можно масштабировать до любого размера и по-прежнему хорошо выглядеть.Добавление переключателя checkbox в CSS

У меня есть один взгляд очень резкий, мне просто хотелось бы добавить текст внутри «ВКЛЮЧЕНО»/«ВЫКЛ» внутри самого коммутатора, и именно там мне нужна ваша помощь.

Вот что я до сих пор:

JSfiddle: https://jsfiddle.net/rcsngjhm/2/

.switch { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
input.cmn-toggle-jwr + label { 
 
    width: 3em; 
 
    height: 1.5em; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    overflow: hidden; 
 
} 
 
input.cmn-toggle-jwr + label:before, 
 
input.cmn-toggle-jwr + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 
input.cmn-toggle-jwr + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    -webkit-transition: background 0.3s; 
 
    -moz-transition: background 0.3s; 
 
    -o-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
} 
 
input.cmn-toggle-jwr + label:after { 
 
    width: 1.5em; 
 
    width: calc(1.5em - 2px); 
 
    background-color: #fff; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -ms-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-transition: margin 0.3s; 
 
    -moz-transition: margin 0.3s; 
 
    -o-transition: margin 0.3s; 
 
    transition: margin 0.3s; 
 
} 
 
input.cmn-toggle-jwr:checked + label:before { 
 
    background-color: #8ce196; 
 
} 
 
input.cmn-toggle-jwr:checked + label:after { 
 
    margin-left: 1.5em; 
 
}

<div class="switch"> 
 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-1"></label> 
 
</div>

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

источник

2016-05-06 JROB

ли вы имеете в виду текст внутри переключателя? вроде как: http://jsfiddle.net/rcsngjhm/3/? – ochi

@ochi Да, вот так. Я просто должен был бы подстроить его, чтобы он выстроился правильно. EDIT: В идеале я бы хотел, чтобы текст оставался там, пока он не скрыт от переключателя (не исчезает) – JROB

Я немного изменил CSS, чтобы попытаться получить текст внутри коммутатора.

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

See updated fiddle

.em1-0 { 
 
    font-size: 1em; 
 
} 
 

 
.em4-0 { 
 
    font-size: 4em; 
 
} 
 

 
.switch { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 

 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 

 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
input.cmn-toggle-jwr + label { 
 
    width: 3em; 
 
    height: 1.5em; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    overflow: hidden; 
 
} 
 

 
input.cmn-toggle-jwr + label:before, 
 
input.cmn-toggle-jwr + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 

 
input.cmn-toggle-jwr + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    -webkit-transition: background 0.3s; 
 
    -moz-transition: background 0.3s; 
 
    -o-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
    /* added these four */ 
 
    font-size: 0.75em; 
 
    content:"off"; 
 
    text-align: right; 
 
    padding: 0.25em 0.35em; 
 
} 
 

 
input.cmn-toggle-jwr + label:after { 
 
    width: 1.5em; 
 
    width: calc(1.5em - 2px); 
 
    background-color: #fff; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -ms-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-transition: margin 0.3s; 
 
    -moz-transition: margin 0.3s; 
 
    -o-transition: margin 0.3s; 
 
    transition: margin 0.3s; 
 
} 
 

 
input.cmn-toggle-jwr:checked + label:before { 
 
    background-color: #8ce196; 
 
    /* added these two */ 
 
    content: "on"; 
 
    text-align:left; 
 
} 
 

 
input.cmn-toggle-jwr:checked + label:after { 
 
    margin-left: 1.5em; 
 
}

<div class="switch em4-0"> 
 
    <input id="cmn-toggle-0" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-0"></label> 
 
</div> 
 

 
<br /> 
 

 
<div class="switch em1-0"> 
 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-1">on</label> 
 
</div>

источник

2016-05-06 18:57:12 ochi

Добавление переключателя checkbox в CSS

ответ

Смежные вопросы