CSS3 Übergang wie für Radio Wahltasten

Ich habe eine Radio-Auswahl-Taste, die ich mit einem Folie-Effekt mit CSS3 anstelle von nur einem Ein-/Ausblendeffekt, den ich derzeit mit CSS3 habe, übergehen möchte.CSS3 Übergang wie für Radio Wahltasten

Kann es mit rein CSS3 getan werden? Ich möchte keine Jquery verwenden, da ich möchte, dass sie so einfach und sauber wie möglich bleibt.

Vielen Dank.

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    font-size: 0; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
label { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background-color: #fff; 
 
    color: green; 
 
    border-radius: 2px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
</div>

Quelle

2016-05-18 Krys

Für die nächste Zeit, bitte google vor .. http://cssdeck.com/labs/better-css-toggle-switches. –

@Mosh Feu Ich möchte keine Checkboxen Mosh, ich will Radio-Tasten, ist es logischer, wählen Sie entweder männlich oder weiblich. Ich habe diese Seite vor – Krys

gesehen In dieser Demo haben Sie Radiobuttons auch .. passen Sie auf .. –

Ich war Spanne nach den Radio-Buttons hinzugefügt, damit er den weißen runden Platz sein wird, die markiert die Option, die ausgewählt.

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    /*font-size: 0;*/ 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:relative; 
 
} 
 
label { 
 
    position: relative; 
 
    z-index:1; 
 
    float:left; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
/*label { 
 
display: inline-block; 
 
font-size: 16px; 
 
font-weight: bold; 
 
width: 50%; 
 
height: 40px; 
 
color: #222; 
 
line-height: 40px; 
 
text-align: center; 
 
cursor: pointer; 
 
transition: all 0.3s; 
 
-webkit-transition: all 0.3s; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
border-radius: 5px; 
 
}*/ 
 
input[type="radio"]:checked + label { 
 
    /*background-color: #fff;*/ 
 
    color: green; 
 
    /*border-radius: 2px;*/ 
 
} 
 

 
span { 
 
    position:absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    width: 50%; 
 
    height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    transform:translate(0); 
 
} 
 

 
#male:checked ~ span { 
 
    transform:translateX(100%); 
 
    left:-5px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
    <span></span> 
 
</div>

http://jsbin.com/tazahek/edit?html,css

Es ist nicht auf IE8 arbeiten und älter (natürlich)

Quelle

2016-05-18 13:24:45

CSS3 Übergang wie für Radio Wahltasten

Antwort

Verwandte Themen