MikeS SamS toggle
<html> <style> .switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; padding: 40px; overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute; width:120px; z-index:3; left: 60px;
}
- switch_left2 {
position: absolute; width: 140px; z-index: -1; left: 0px; }
- switch_right2 {
position: absolute; width: 140px; z-index: 3; left: 0px; }
- oneWrapper {
position:relative; width: 145px; display:inline-block; }
- switchLabel2 {
position:relative; }
fieldset { border:0px; }
- hidden_initial {
position: absolute !important;
clip: rect(1px,1px,1px,1px); overflow: hidden;
left:9999px; }
- hidden {
position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block; width: 120px; background-color: #e4e4e4; color: rgba(0, 0, 0, 0.6); font-size: 14px; font-weight: normal; text-align: center; text-shadow: none; padding: 6px 14px; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; z-index: 15;
}
.switch-field label:hover {
cursor: pointer;
}
- oneWrapper input[type="radio"]:focus+label {
outline:thin dotted; outline-width:1px; outline-color: #333
}
- oneWrapper input:checked + label {
background-color: #A5DC86; -webkit-box-shadow: none; box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
} </style> <body>
Toggle Example
Visually-styled standard radio buttons
<form class="form">
<fieldset> <legend id="hidden">Add Recipient By:</legend>
<input type="radio" id="switch_left2" name="switch_2" value="yes" checked/>
<label for="switch_left2">Email or Mobile</label>
<input type="radio" id="switch_right2" name="switch_2" value="no" />
<label for="switch_right2" id="switchLabel2">Account</label>
</fieldset>
Unstyled radio buttons for comparison (turn off CSS to see)
<input type="radio" value="yes" name="test" id="testRadio1">
<label for="testRadio1">Email or Mobile</label>
<input type="radio" value="no" id="testRadio2" name="test">
<label for="testRadio2">Account</label>
</form>
</form>
</body> <html>
