Attach CSS to radio button options for colour etc

Sorry here is a trickier one.....well for me anyway. The CSS, DIVs, placement etc are all fine. However I cannot figure out how to add an individual CSS to each radio button.

What I would like to do is add the attribute lable to the CSS.

Currently it spits out the following.
<div>
  <span style="font-weight:bold;"><span>*</span> Please Choose a Colour<br /></span><table id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40" border="0">
    <tr>
      <td><input id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_0" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="106" checked="checked" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_0">Black</label></td>
    </tr><tr>
      <td><input id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_1" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="110" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_1">Chocolate Brown</label></td>
    </tr><tr>
      <td><input id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_2" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="111" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_2">Black Brisa</label></td>
    </tr>


I would like it to spit out
                    <div>
  <div class="PromptTxt>* Please Select A Colour</div>

<div Class="Attrib_Colour" id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40" border="0">

<input  id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_0" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="106" checked="checked" class="Black" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_0">Black</label>

<input id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_1" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="110" class="Chocolate_Brown" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_1">Chocolate Brown</label>

<input id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_2" type="radio" name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$Colour_40" value="111" class="Black_Brisa" /><label for="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_2">Black Brisa</label>
..........


I realise I can set css on the ID ie
#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_Colour_40_1 {}

Just seems long. Of course this could be a much bigger job than I thought. I look for a repeater control to strip out the table but cant find it. So now have a saw head and the wall has a whole in it.

Any help would be great.

In case you read this far! The reason for it is so I can set up colour swatches in place of the radio buttons using css (and script) which I can do. So a potential client can actually click on the colour swatch instead of just choosing a drop down.

if you have read this far....THANKS!

PS hope it made sense

Hi,

What I think you could do to style each radio button dependant on color is add this to the code behind.

Now the idea of this is that you will have the attribute Title set as the color you require to be shown e.g Black = Black CSS etc.

Now another note is this will put each radio button in its own span and this is what is styled. So you could have a background-image square as the color and allow 20px to the left in the image to allow for the radio button.

Here is the code to find and replace in ProductAttribute.ascx.cs;

case AttributeControlTypeEnum.RadioList:
                                {
                                    var rblAttributes = new RadioButtonList();
                                    rblAttributes.ID = controlID;
                                    var pvaValues = attribute.ProductVariantAttributeValues;
                                    foreach (var pvaValue in pvaValues)
                                    {
                                        string pvaValueName = pvaValue.Name;
                                        if (!this.HidePrices)
                                        {
                                            decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                            decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                            if (priceAdjustmentBase > decimal.Zero)
                                                pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                        }
                                        var pvaValueItem = new ListItem(Server.HtmlEncode(pvaValueName), pvaValue.ProductVariantAttributeValueID.ToString());
                                        pvaValueItem.Selected = pvaValue.IsPreSelected;
                                        rblAttributes.Items.Add(pvaValueItem);

                                        ListItem color;

                                        if (pvaValueName == "Black")
                                        {
                                            color = rblAttributes.Items.FindByText("Black");
                                            color.Attributes.Add("style", "background-color: black; color: #000;");
                                        }

                                        if (pvaValueName == "Chocolate Brown")
                                        {
                                            color = rblAttributes.Items.FindByText("Chocolate Brown");
                                            color.Attributes.Add("style", "background-color: brown; color: #000;");
                                        }

                                    }
                                    divAttribute.Controls.Add(rblAttributes);
                                }
                                break;

What I highlighted in bold is code I have added. You will need to recompile project.

This is a easy way of doing what you want, but each color will need to be added as per example.

Hope this helps, if I can further assist I will.

Excellent, thanks. I will give it a go over the weekend and let you know how it goes. THANKS!

In order to avoid having radio buttons in a table, you can do this:

case AttributeControlTypeEnum.RadioList:
    {
          var rblAttributes = new RadioButtonList();
          rblAttributes.ID = controlID;
          rblAttributes.CssClass = "radio-list";
          rblAttributes.RepeatLayout = RepeatLayout.Flow;
.
.
.

If you have VS2010 (using asp.net 4), then you can also use UnorderedList and OrderedList.

For details see msdn documentation