Solved

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

Posted on 2011-03-04
4
1,149 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
ID: 35036864
0
 

Author Comment

by:lino_evolution
ID: 35036895
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
ID: 35042045

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
ID: 35082287
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Dynamics CRM Plugin Query TotalRecordCount returning -1 13 44
ASP.NET Content Page 3 31
transition to visual .net from vb6 5 41
Autocomplete with Jquery Question 2 20
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…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
The viewer will learn how to dynamically set the form action using jQuery.
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…

828 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