First, the CSS code is as follows:
. switch {
position:relative;
margin:20px Auto;
height:26px;
width:120px;
Background:rgba (0, 0, 0, 0.25);
border-radius:3px;
Box-shadow:inset 0 1px 3px rgba (0, 0, 0, 0.8), 0 1px rgba (255, 255, 255, 0.3);
Background: #444;
}
. Switch-label {
position:relative;
Z-index:2;
Float:left;
width:58px;
line-height:26px;
font-size:11px;
Color: #888;
Text-align:center;
text-shadow:0 2px 1px rgba (0, 0, 0, 1);
Cursor:pointer;
}
. switch-label:hover {
Color: #fff;
}
. switch-input {
Display:none;
}
. switch-input:checked +. Switch-label {
Font-weight:bold;
Color:rgba (0, 0, 0, 1);
text-shadow:0 1px 0px Rgba (1, 1, 1,. 1);
Transition:0.15s ease-out;
}
. switch-input:checked +. switch-label-on ~. switch-selection {
left:60px;
}
. switch-selection {
Display:block;
Position:absolute;
Z-index:1;
top:2px;
left:2px;
width:58px;
height:22px;
Background: #888;
border-radius:3px;
Box-shadow:inset 0 1px rgba (255, 255, 255, 0.5), 0 0 2px rgba (0, 0, 0, 0.2);
Transition:left 0.15s ease-out;
}
Second, the HTML code is as follows:
<div class= "Switch" >
<input type= "Radio" class= "Switch-input" name= "radioname" value= "0" id= "Off" checked>
<label for= "Off" class= "Switch-label Switch-label-off" >OFF</label>
<input type= "Radio" class= "Switch-input" name= "Radioname" value= "1" id= "on" >
<label for= "on" class= "Switch-label switch-label-on" >ON</label>
<span class= "Switch-selection" ></span>
</div>
Mobile-side Radio controls iOS effects