CSS3转换方式，用于单选按钮

Question

I have a radio choice button that I wish to transition with a slide effect with CSS3 instead of just a fade in/out effect that I have currently with CSS3.

Can it be done with purely CSS3? I don't want to use any jquery, as I would like it stay simple and clean as possible.

Thank you.

 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> 

Answer 1

I was added span after the radio buttons so he will be the white rounded square who mark the option that selected.

 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

It's not working on IE8 and older (obviously)