Solved

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

Posted on 2011-03-04
4
1,114 Views
Last Modified: 2012-05-11
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
Comment
Question by:lino_evolution
4 Comments
 
LVL 9

Expert Comment

by:jkofte
Comment Utility
0
 

Author Comment

by:lino_evolution
Comment Utility
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
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility

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
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now