[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1203
  • Last Modified:

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


0
lino_evolution
Asked:
lino_evolution
1 Solution
 
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
 
mickey159Commented:
You can use js library made for you.
http://uniformjs.com/
This is because styform yourselves may cause many compability issues.

Good luck!
0

Featured Post

Fill in the form and get your FREE NFR key NOW!

Veeam is happy to provide a FREE NFR server license to certified engineers, trainers, and bloggers.  It allows for the non‑production use of Veeam Agent for Microsoft Windows. This license is valid for five workstations and two servers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now