MikeS SamS toggle

From Level Access Web Labs
Jump to navigation Jump to search

<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;

}

  1. switch_left2 {

position: absolute; width: 140px; z-index: -1; left: 0px; }

  1. switch_right2 {

position: absolute; width: 140px; z-index: 3; left: 0px; }

  1. oneWrapper {

position:relative; width: 145px; display:inline-block; }

  1. switchLabel2 {

position:relative; }

fieldset { border:0px; }

  1. hidden_initial {

position: absolute !important;

   clip: rect(1px,1px,1px,1px);
   overflow: hidden;

left:9999px; }

  1. 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;

}

  1. oneWrapper input[type="radio"]:focus+label {
 outline:thin dotted;
 outline-width:1px;
 outline-color: #333

}


  1. 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>