Styling Checkboxes/Radios as Icons

by Ben Clayton

HTML

<div class="imageS">
        <input id="phoneme1" type="checkbox"  />
        <label for="phoneme1">Im edededededcc edge</label>
    </div>
 
    <hr>

    <div class="imageN ">
        <input id="phoneme2" type="checkbox"  />
        <label for="phoneme2">Im ge</label>
    </div>
    <hr>
  


<div class="imageW">
        <input id="phoneme3" type="checkbox"  />
        <label for="phoneme3">Im ge</label>
    </div>
    <hr>

<div class="imageE">
        <input id="phoneme4" type="checkbox"  />
    <div id='divE'><label for="phoneme4">Ima ge</label></div>
    </div>
    <hr>

CSS

input[type="checkbox"] {
    display: none;
 }

.imageS input[type="checkbox"]+label:before {
     width:72px;
     height:70px;
    display:block;
    margin:5px;
      content:'\2003';
     background-image: url("http://www.photoshop-plus.co.uk/content/tutorials/button_switch/step27.gif");
    background-repeat:no-repeat;
    background-position:-220px -164px;
 }

.imageS {
    width:72px;
    text-align:center    
}

.imageS input[type="checkbox"]:checked+label:before {
    background-position:-310px -164px;
 }

.imageN input[type="checkbox"]+label:after {
     width:72px;
     height:70px;
    display:block;
    margin:5px;
      content:'\2003';
     background-image: url("http://www.photoshop-plus.co.uk/content/tutorials/button_switch/step27.gif");
    background-repeat:no-repeat;
    background-position:-220px -164px;
 }
 .imageN input[type="checkbox"]:checked+label:after {
    background-position:-310px -164px;
 }
.imageN {
    width:72px;
    text-align:center    
}


.imageW input[type="checkbox"]+label:after {
     width:72px;
     height:70px;
    display:inline-block;
    margin:5px;
      content:'\2003';
     background-image: url("http://www.photoshop-plus.co.uk/content/tutorials/button_switch/step27.gif");
    background-repeat:no-repeat;
    background-position:-220px -164px;
 }
 .imageW input[type="checkbox"]:checked+label:after {
    background-position:-310px -164px;
 }

.imageE input[type="checkbox"]+label:before {
     width:72px;
     height:70px;
    display:inline-block;
    margin:5px;
      content:'\2003';
     background-image: url("http://www.photoshop-plus.co.uk/content/tutorials/button_switch/step27.gif");
    background-repeat:no-repeat;
    background-position:-220px -164px;
 }
 .imageE input[type="checkbox"]:checked+label:before {
    background-position:-310px -164px;
 }
.imageE #divE{
    height:16px;
     vertical-align:middle;   
}