How to do cool radio buttons or select buttons

js

function ClickStatusRadio(radio) {
    var $radios = $(radio).parents('.commentradios');
    var value = $(radio).attr('value');
    $radios.find('.commentradiobtn').removeClass('active');
    var $input = $radios.find('input[name=Status]');
    $input.val(value);
    $(radio).addClass('active');
    //NewCommentChangeSubmitLabel($input);
}

css

.commentradios-wrapper { position: absolute; left: 605px; margin-top: 2px; font-size: 11px; }
.commentradios-editcomment { left: 585px; display: none; }

a.commentradiobtn { background: #cfcfcf; text-decoration: none; border: 1px solid #999; padding:2px 8px; margin:0; margin-left: -1px; display: block;float: left; color:black; }
a.commentradiobtn:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
a.commentradiobtn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
a.commentradiobtn.active { background: #78AB46;  }

html

looks like this

select buttons

		function ClickFilterCheck(checkbox) {
			var $radios = $(checkbox).parents('.filterchecks');
			var value = $(checkbox).attr('value');
			if(!value){//use html
				value = $(checkbox).html();
			}
			//$radios.find('.filtercheckbtn').removeClass('active');
			var $input = $radios.find('input[name=Filter]');
			$input.val(value);
			$(checkbox).toggleClass('active');

				//walk the rows
			$(".filterRow").each(function () {
				var currRow = $(this);
				var statusOnThisLine = $(currRow).find('.orst').html().trim().toLowerCase();
			
				// in this row, we have status - see if that is checked
				//walk the 'checkboxes' hiding things in the list below
				var showIsOK = false;
				$(".filtercheckbtn").each(function () {
					var isChecked =  $(this).hasClass('active');
					var statusOnThisButton = $(this).html().trim().toLowerCase();
					if(isChecked){
						if (statusOnThisLine.indexOf(statusOnThisButton)!=-1) {
							showIsOK = true;
						}
					}
				});
				if(showIsOK){
					$(currRow).show();
				}else{
					$(currRow).hide();
				}
			});
		}

css

.filterchecks-wrapper { position: absolute; left: 605px; margin-top: 2px; font-size: 11px; }
.filterchecks-editcomment { left: 585px; display: none; }

a.filtercheckbtn { background: #cfcfcf; text-decoration: none; border: 1px solid #999; padding:2px 8px; margin:0; margin-left: -1px; display: block;float: left; color:black; }
a.filtercheckbtn:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
a.filtercheckbtn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
a.filtercheckbtn.active { background: #78AB46;  }

html

			<div class="filterchecks-wrapper">
				<div class="filterchecks">
					<input type="hidden" name="Filter" value="" >
					<div>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Received</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Processing</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Picked</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Dispatched</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Invoiced</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Back Order</a>
						<a href="#" class="filtercheckbtn active" onclick="ClickFilterCheck(this);return false;">Pre-Allocated</a>
					</div>
					<div class="clear"></div>
				</div>
			</div>

Looks like this