Solved

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

Posted on 2011-03-04
4
1,166 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

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

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

707 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