megwoo
6/25/2015 - 7:20 PM

CSS Custom Radio Buttons

// Fancy radio buttons
function customRadio(radioName, excludeClass){
	var selector = 'input[type="'+ radioName +'"]:not(".'+excludeClass+'")';
    var radioButton = $(selector);
    $(radioButton).each(function(){
        $(this).wrap( '<span class="custom-radio"></span>' );
        if($(this).is(':checked')){
            $(this).parent().addClass("selected");
        }
    });
    $(radioButton).click(function(){
    	var thisButton = 'input[name="'+ $(this).attr('name') +'"]';
    	$(thisButton).closest('.custom-radio').removeClass('selected');
    	
    	 $(thisButton).each(function () {
            $(this).is(':checked') ? $(this).closest('.custom-radio').addClass('selected') : $(this).closest('.custom-radio').removeClass('selected');
        });
    });
}
customRadio('radio', 'not-fancy');


// CSS
.custom-radio {
	width: 20px;
	height: 20px;
	display: inline-block;
	position: relative;
	z-index: 1;
	top: 3px;
	background: url(../images/radio.png) no-repeat;
}

.custom-radio.selected {
	background: url(../images/radio-selected.png) no-repeat;
}

.custom-radio input[type="radio"] {
	margin: 1px;
	position: absolute;
	z-index: 2;            
	cursor: pointer;
	outline: none;
	opacity: 0;
	/* CSS hacks for older browsers */
	_noFocusLine: expression(this.hideFocus=true); 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-khtml-opacity: 0;
	-moz-opacity: 0;
}