Ho un pulsante di commutazione. Ma non funziona con la radio del tipo di input. Se provo con il pulsante checkbox funziona. Perché? Come posso risolvere, mantenendo l'ingresso radio?Switch css non funziona con il tipo di ingresso radio
@charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
\t background: #4a4a4a;
\t color: #151515;
\t font: 100%/1.5em "Lato", sans-serif;
\t margin: 0;
}
input {
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/* ---------- SWITCH ---------- */
.container {
\t height: 64px;
\t left: 50%;
\t margin: -32px 0 0 -80px;
\t position: absolute;
\t top: 50%;
\t width: 160px;
}
.switch {
\t background: #fff;
\t border-radius: 32px;
\t display: block;
\t height: 64px;
\t position: relative;
\t width: 160px;
}
.switch label {
\t color: #fff;
\t font-size: 48px;
\t font-weight: 300;
\t line-height: 64px;
\t text-transform: uppercase;
\t -webkit-transition: color .2s ease;
\t -moz-transition: color .2s ease;
\t -ms-transition: color .2s ease;
\t -o-transition: color .2s ease;
\t transition: color .2s ease;
\t width: 100px;
}
.switch label:nth-of-type(1) {
\t left: -75%;
\t position: absolute;
\t text-align: right;
}
.switch label:nth-of-type(2) {
\t position: absolute;
right: -75%;
\t text-align: left;
}
.switch input {
\t height: 64px;
\t left: 0;
\t opacity: 0;
\t position: absolute;
\t top: 0;
\t width: 160px;
\t z-index: 2;
}
.switch input:checked~label:nth-of-type(1) { color: #fff; }
.switch input:checked~label:nth-of-type(2) { color: #808080; }
.switch input~:checked~label:nth-of-type(1) { color: #808080; }
.switch input~:checked~label:nth-of-type(2) { color: #fff; }
.switch input:checked~.toggle {
\t left: 4px;
}
.switch input~:checked~.toggle {
\t left: 100px;
}
.switch input:checked {
\t z-index: 0;
}
.toggle {
\t background: #4a4a4a;
\t border-radius: 50%;
\t height: 56px;
\t left: 0;
\t position: absolute;
\t top: 4px;
\t -webkit-transition: left .2s ease;
\t -moz-transition: left .2s ease;
\t -ms-transition: left .2s ease;
\t -o-transition: left .2s ease;
\t transition: left .2s ease;
\t width: 56px;
\t z-index: 1;
}
.c-window{
display: block;
position: absolute;
width: 235px;
height: 235px;
margin: 0 auto;
border-radius: 100%;
border: 8px solid #FFB399;
background: #5ddfe8;
box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;
overflow: hidden;
\t transition: background 1s ease-in-out;
}
input[type="radio"]:checked ~ .c-window {
background: #111;
}
\t <div class="container">
<div class="c-window"></div>
\t \t <div class="switch white">
\t \t \t <input type="radio" name="switch" id="switch-off">
\t \t \t <input type="radio" name="switch" id="switch-on" checked>
\t \t \t <label for="switch-off">On</label>
\t \t \t <label for="switch-on">Off</label>
\t \t \t <span class="toggle"></span>
\t \t </div> <!-- end switch -->
\t </div> <!-- end container -->
mi piacerebbe che il .c finestra cambia il colore di sfondo quando si passa
si dispone di alcuni errori di battitura come 'ingresso .Switch ~: checked',' ingresso .Switch ~: selezionata ~ .toggle'. Inoltre, 'input [type =" radio "]: controllato ~ .c-window' non funzionerà, dal momento che non sono fratelli – fcalderan
Ho modificato . Input di input: controllato ~ .c-window { background: # 111 ; } ma non funziona ancora – panagulis72
ma continua a essere immesso: controllato e la tua .c-window non è fratello. Per ulteriori informazioni, consultare https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors – fcalderan