input::after {
    content: '';
    margin: 0; 
    padding: 0;
    width: 39px;
    height: 25px;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    position: absolute;
    top: 0; left: 53px;
    border: 1px solid #919191;
    -webkit-transition: 1s all linear;
input::before {
    content: 'ON';
    margin: 0; 
    padding: 0;
    width: 55px;
    height: 25px;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    border-radius: 3px;
    border: 1px solid #1654b5;
    box-shadow: inset 0 2px 2px #2a5bb3,
                inset -3px 0 3px #2a5bb3;
    text-align: center;
    color: #fff;
    font: 700 14px sans-serif; 
    text-shadow: 0 -1px 0 #1b3b6f;
    line-height: 27px;
    position: absolute;
    top: 0; left: 0;
input {
    -webkit-appearance: none;
    margin: 10px auto; 
    padding: 0;
    display: block;
    width: 94px;
    height: 27px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
input:checked::after {
    left: 0;
input:checked::before {
    content: 'OFF';
    left: 37px;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6,
                inset 3px 0 3px #b6b6b6;
    color: #7f7f7f;
    text-shadow: none;
    border-color: #7d7d7d

Another little experiment I decided to work on today, in my spare time. So, what is it? Well, I'm sure you've seen many of these switches/toggles in the past, and they are quite easy to implement - but what's different about mine? Simple - it has just one tag (the checkbox itself) and the rest is just CSS magic. Ideally, this would have smoothly moved over - true to the actual toggle on iOS, but pseudo-elements (::before and ::after) haven't got to that stage in their lifetime yet, and I'm not sure if they'll ever get it, to be quite honest (due to what they're intended for etc).
This demo works in webkit browsers, and it should work in Opera and Firefox, as well, but I haven't added the code for that, as it's so time consuming!

Licensing and other stuff

  • The project is licensed under the WTFPL so enjoy!
  • Attribution is not necessary, but as always, much appreciated.
  • JSFiddle Link