We help IT Professionals succeed at work.

Custom Styled asp.net RadioButton

ttist25 asked
Hello There,

I'm tweaking an asp.net application that uses radio buttons.  I would like to style the radio buttons using Ryan Fait's method described here:

Essentially the way it works is "the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked".

Unfortunately, it's not working on my <asp:RadioButton />.  I'm assuming it's something to do with when the control is rendered and the .js is applied.  

Has anyone managed to get this or a similar method to work with asp.net?  

I've got all of my references, etc. straight because I can get a standard html input radio button on the same page to work.  

Watch Question

When you need to hide the actual element, you call it by ID.  In asp.net however, when the page is rendered, the IDs aren't always what you've set.  If you use javascript to call the ID of an asp.net control, you need to add this to your web.config:


  <pages clientIDMode="Static" />  

Open in new window

I think it's the static I use (my code is in work and haven't looked at this for a few months):

Static - ASP.NET use exactly the same ID given to the server control for its client-side ID
How is your asp:RadioButton declared?

<asp:RadioButton ID="RadioButtonList" runat="server" CssClass="styled" />   ??

If you view source of your rendered ASP.NET page, do you see input type="radio" with class="styled" ???

In reference to the above post by sbickerstaff:  You can reference the ID for use in javascript in ASP.NET just by using .ClientID: For example, <%= RadioButtonList.ClientID %> but that isn't needed for Ryan's script to work.