css - Change label input on click and then back to original when a different image clicked? -

css - Change label input on click and then back to original when a different image clicked? -

so i'm using checkbox hack in order alter 3 buttons on click, when clicks 1 changes selected button image, clicks on button changes other button original image , new other clicked button goes select. problem can't figure out how have 3 different selected states. 1 each color. right uses greenbtn-selected obviously, how add together more 1 each button had it's own selected state?

also reason content:url isn't working on firefox? there way it, tried background:url , doesn't work in chrome! ugh.

thanks much!!!

the selected button images..

http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png

the buttons..

<label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png"> </label> <label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png"> </label> <label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png"> </label>

the css...

label > input + img { cursor: pointer; } label > input { position: absolute; visibility: hidden; width: 130px; } label > input:checked + img { content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png"); }

class="snippet-code-js lang-js prettyprint-override">label > input + img { cursor: pointer; } label > input { position: absolute; visibility: hidden; width: 130px; } label > input: checked + img { content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png"); } class="snippet-code-html lang-html prettyprint-override"><label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png"> </label> <label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png"> </label> <label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png"> </label>

dont utilize image utilize <div> or span

js fiddle

give background image , utilize pseudo before changing image

html

<label> <input id="ctl00_generalcontentplaceholder_rbpackage1" type="radio" value="rbpackage1" name="ctl00$generalcontentplaceholder$product"> <span class="check-green"></span> </label>

css

.check-green { background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png); width:124px; height:30px; } label > input:checked + span:before { content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png"); display:block; }

css button checkbox input label