Styling Checkboxes/Radios as Icons

by Ben Clayton

HTML

<form>
    <p class="normal">
        <input id="emailme" type="checkbox" name="emailme" />
        <label for="emailme"><u>Email me reply</u></label>
    </p>
    <p>
        <input id="field_terms" type="checkbox" required name="terms" />
        <label for="field_terms">I accept the <u>Terms and Conditions</u></label>
    </p>
    <p class="image">
        <input id="phoneme" type="checkbox" name="phoneme" />
        <label for="phoneme"><u> Image</u></label>
    </p>
    <p class="image2">
        <input id="phoneme2" type="checkbox" name="phoneme2" />
        <label for="phoneme2"><u> Image</u></label>
    </p>
    <p class="image3">
        <input id="phoneme3" type="checkbox" name="phoneme3" />
        <label for="phoneme3"><u> Image</u></label>
    </p>

    <h3>Checkboxes</h3>
    <p class="image3 blackbck">
        <input id="phoneme4" type="checkbox" name="phoneme4" />
        <label for="phoneme4"></label>
        <input id="phoneme5" type="checkbox" name="phoneme5" />
        <label for="phoneme5"></label>
        <input id="phoneme6" type="checkbox" name="phoneme6" />
        <label for="phoneme6"></label>
    </p>

    
    <h3>Radios</h3>
    <p class="image4 blackbck">
        <input  type="radio" name="phoneme7" id="phoneme7-1" value='sw1'/>
        <label for="phoneme7-1"></label>
        <input  type="radio" name="phoneme7" id="phoneme7-2" value='sw2'/>
        <label for="phoneme7-2"></label>
        <input  type="radio" name="phoneme7" id="phoneme7-3" value='sw3'/>
        <label for="phoneme7-3"></label>
    </p>
    labels are linked to inputs by 'id'
    
</form>

CSS

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

 .normal input[type="checkbox"] + label:before {
     content:"\2610";
     padding-right: 0.2em;
     font-size: 1.6em;
    color: black;
 }

 .normal input[type="checkbox"]:checked + label:before {
     content:"\2611";
    padding-right: 0.2em;
     font-size: 1.6em;
     color: blue;
 }

  input[type="checkbox"]:required:invalid + label:before {
    content:"\2610";
     padding-right: 0.2em;
     font-size: 1.6em;
     color: red;
 }

 input[type="checkbox"]:required:valid + label:before {
     content:"\2611";
     padding-right: 0.2em;
     font-size: 1.6em;
     color: green;
 }

 .image input[type="checkbox"] + label:before {
     width:17px;
     height:17px;
     padding-right: 0.2em;
     font-size: 1.5em;
     content:'\2003';
     background-image: url("http://vanillakd.v11002.infxlocal/x_icons/icon-fldrplain.gif");
    background-repeat:no-repeat
 }



 .image input[type="checkbox"]:checked + label:before {
     background-image: url("http://vanillakd.v11002.infxlocal/x_icons/icon-fldrpage.gif");
 }



.image2 input[type="checkbox"] + label:before {
     width:17px;
     height:17px;
     padding-right: 0.2em;
     font-size: 1.5em;
     content:url("http://vanillakd.v11002.infxlocal/x_icons/icon-fldrplain.gif");
 }
 .image2 input[type="checkbox"]:checked + label:before {
     content: url("http://vanillakd.v11002.infxlocal/x_icons/icon-fldrpage.gif");
 }

.image3 input[type="checkbox"] + label:before {
     min-width:72px;
     min-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;
 }
 .image3 input[type="checkbox"]:checked + label:before {
    background-position:-310px -164px;
 }

.image4...