Adding Background Color to RadioButtonList Items

With the same CSS and similar code as I posted before for adding background color to CheckBoxList items, we can do the same thing to a RadioButtonList control.

Here is the code-behind file:

Private Sub RadioButtonList2_DataBound(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles RadioButtonList2.DataBound
    Dim cols As Integer = Me.RadioButtonList2.RepeatColumns
    If (cols = 0) Then
        cols = 1
    End If
    For i As Integer = 0 To Me.RadioButtonList2.Items.Count - 1
        Dim j As Integer = i \ cols
        Dim item As ListItem = Me.RadioButtonList2.Items(i)
        If (j Mod 2 = 0) Then
            item.Attributes.Add("class", "BlueSpan")
        Else
            item.Attributes.Add("class", "YellowSpan")
        End If
    Next
End Sub

And here is the CSS:

.BlueSpan label
{
    background-color:Blue;
    color:#ffffff;
    display:inline-block;
    width:300px; /* change the width if needed */
}

.YellowSpan label
{
    background-color:Yellow;
    color:#000000;
    width:300px; /* change the width if needed */
     display:inline-block;
}

The reason I use “label” in the CSS file is because when both CheckBoxList and RadioButtonList are rendered into the browser, the actual text for each item is wrapped with a <label> tag.

Here is the screen shot of the result.

2008-12-08_144602

Leave a Reply

avatar
  Subscribe  
Notify of