[css] html radio buttons with image states

[Costas]

references
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-buttons.php

http://bootsnipp.com/snippets/featured/image-checkbox-buttons

using css3 - http://stackoverflow.com/a/26737044

1. sample bootstrap html

//http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=buttons-radio
<style>
//modify the active to be visible IS ACTIVE!
.btn-bimary.active  {
    background: #0099cc;
    color: #ffffff;
}
</style>

            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_1" name="page_cat_radio" value="1" />  [img]img/page_cat_a.png[/img]
                </label> 
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_2" name="page_cat_radio" value="2" /> [img]img/page_cat_b.png[/img]
                </label> 
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_3" name="page_cat_radio" value="3" /> [img]img/page_cat_c.png[/img]
                </label> 
                <br>
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_4" name="page_cat_radio" value="4" /> [img]img/page_cat_d.png[/img]
                </label> 
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_5" name="page_cat_radio" value="5" /> [img]img/page_cat_e.png[/img]
                </label> 
                <label class="btn btn-default btn-bimary">
                    <input type="radio" id="page_cat_radio_6" name="page_cat_radio" value="6" /> [img]img/page_cat_f.png[/img]
                </label> 
            </div>

2. sample plain html

//http://jsbin.com/image-instead-of-radio-button/3/edit
<style>
label > input{ /* HIDE RADIO */
  display:none;
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}
</style>

  <label>
    <input type="radio" name="page_cat_radio" value="small" />
    [img]http://placehold.it/20x20/35d/fff&text=f[/img]
  </label>
  
  <label>
    <input type="radio" name="page_cat_radio" value="big"/>
    [img]http://placehold.it/40x60/35d/fff&text=f[/img]
  </label>
  
  <label>
    <input id="fb3" type="radio" name="page_cat_radio" value="med" />
    [img]http://placehold.it/40x40/35d/fff&text=f[/img]
  </label>
  
  <label>
    <input id="fb4" type="radio" name="page_cat_radio" value="long" />
    [img]http://placehold.it/60x15/35d/fff&text=f[/img]
  </label>

Javascript is unique for the samples^

//FYI - when form submitted also get page_cat_radio = x value,
//where x is the checked - proof http://jsfiddle.net/KyleMit/0nevkwyn/

//manually get the value
//http://www.tutorialrepublic.com/faq/how-to-get-the-value-of-selected-radio-button-using-jquery.php
alert($("input[name='page_cat_radio']:checked").val());

//manually set the value
//http://stackoverflow.com/a/26191899
var aEls = $('[name=page_cat_radio]');
//aEls.prop('checked', false).parent().removeClass('active');
aEls.eq(1).prop('checked', true).parent().addClass('active');

finally use http://screwdefaultbuttons.com/
or
http://github.com/mattSOLANO/ScrewDefaultButtonsV2