Can you style a Radiobutton List with a fancy skin?(please see example)

Hey Guys,

Got my graphic designer who is aching to get his fancy checkboxes and radiobuttons in this .NET web application.

Is this possible to do in .NET?  I have tried to apply the style to the list control but when it renders of course the list turns it into a table.  basically the code below is putting a skin on each checkbox or radiobutton.  But because we are working with checkbox lists and radiobutton lists the solution is not transferable from his example that uses a standard HTML input control.

So is there any solution to apply this style to .NET radiobutton list controls or even a single checkbox control in itself?

He wants the checkboxes to look like this.

http://dev.checkyourdrinking.net/prototype/

[b]CSS[/b]
.radio {
	height: 25px;
	width: 25px;
	clear:left;
	float:left;
	background: url("radio.png");
	background-repeat:no-repeat;
	cursor: default;
}

.checkbox {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("checkbox.png") no-repeat;
	cursor: default;
	text-align:left;
}
.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}

[b]JQUERY[/b]
<script src="js/jquery.custom_radio_checkbox.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){
	$(".radio").dgStyle();
	$(".checkbox").dgStyle();
});
</script>

[b]HTML[/b]
 <div class="radio" id="box-single">
<input type="radio" id="single" name="marital_status" checked value="single">
</div>

Open in new window


lino_evolutionAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
mickey159Connect With a Mentor Commented:
You can use js library made for you.
http://uniformjs.com/
This is because styform yourselves may cause many compability issues.

Good luck!
0
 
jkofteCommented:
0
 
lino_evolutionAuthor Commented:
sorry thats not what I am looking for.  Those are HTML input controls with the style applied to them.

I am using <asp: checkboxlist /> or <asp:radiobuttonlist />

I cannot style the list because it renders it to html as a table and applies the style to the table.
0
 
ProculopsisCommented:

I don't know if this will help you but, if not, post your resultant html for another solution:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26864010.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script> 

jQuery(document).ready(function(){

  $("input[name=finish]").siblings().css( { opacity: 0.4 } );

  $(".imagebox").click( function() {
    $(this).siblings().get(0).checked = true;
    $("input[name=finish]").siblings().css( { opacity: 0.4 } );
    $("input[name=finish]:checked").siblings().css( { opacity: 1 } );
  });

});

</script>

<style>
label { display: block; cursor: pointer; }
.label-radio input { position: absolute; left: -9999px; }
</style>

</head>
<body>

<label class="label-radio">
  <input type="radio" name="finish" value="walnut">
  <img class="imagebox" src="http://www.free-graphics.com/clipart/Bullets/free-mini-clipart1.jpg" width="97" height="100"/>
</label>
                            
<label class="label-radio">
  <input type="radio" name="finish" value="cherry">
  <img class="imagebox" src="http://www.free-graphics.com/clipart/Bullets/free-mini-clipart2.jpg" width="97" height="100"/>
</label>
                            
<label class="label-radio">
  <input type="radio" name="finish" value="piano">
  <img class="imagebox" src="http://www.free-graphics.com/clipart/Bullets/free-mini-clipart3.jpg" width="97" height="100"/>
</label>

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.