Question

I am using a radio button because it makes binding the items and controlling dynamic events very easy.

My problem is hiding the RadioButtonList ListItem “circles” that are to the left or right of the ListItem.Text.

I set each ListItem.Text property to be an HTML <img>.

I would like the RadioButtonList to display just the ListItem.Text property in the RadioButtonList list, without the radio-button circle beside it. After some research, I realize I do not think it is possible to hide the radio-button’s ListItem circle’s, without hiding the entire radio button list.

So my second option, would be to place the ListItem.Text on-top of the RadioButtonList ListItem “circles” via CSS. Here is what I have tried to far, but I’m afraid my CSS skills are slack 🙁

noPizzaMod.Text = "<img src=\"image.png \" />";
noPizzaMod.Attributes.CssStyle.Add("float", "left");
noPizzaMod.Attributes.CssStyle.Add("padding","0 1em");
noPizzaMod.Attributes.CssStyle.Add("text-align", "center");
rdo_pizzamods.Items.Add(noPizzaMod);

Results: Just added padding to the left of the radio-button ListItem Circle.

Again, the task at hand is to float the ListItem.Text (the picture element) on-top of the RadioButtonList ListItem “circle”

Thank you for your time!

PS: Another thing I have tried was using JQuery to display:none the radio-button listitems but of course that hides the text, as well as the entire radio-button list 🙁

As a last resort, I could switch to the togglebuttonextender for the checkbox, but this would include a redesign of our display mechanism. Was hoping there was a simple solution and one of the guru’s could point me there!

EDIT:

I simply have an asp:Panel which I dynamically add the RadioButtonList to in the code behind.

<asp:Panel ID="pnl_pizzamods" runat="server"></asp:Panel>

Like so

ListItem PizzaMod = new ListItem();
noPizzaMod.Text = "<img src=\"image.png \" />";
noPizzaMod.Attributes.CssStyle.Add("float", "left");
noPizzaMod.Attributes.CssStyle.Add("padding","0 1em");
noPizzaMod.Attributes.CssStyle.Add("text-align", "center");
rdo_pizzamods.Items.Add(noPizzaMod);
pnl_pizzamods.Controls.Add(rdo_pizzamods);

I also add custom dynamic event handlers and a lot of other mojo in the background which makes the RadioButtonList data binding easy for me to control. I’m sure it does not effect the visual layout though! Again, thanks for the help!

Answer 1

Have you tried simply hiding the radio button?

input[type='radio'] { visibility: hidden; }

Fiddle: http://jsfiddle.net/kboucher/8GaV5/