How can I style my CheckBoxList in ASP.Net using CSS?

Question

I have a CheckBoxList in ASP.Net and I want to change the background color of the checked Item.

How can I do it?
I want to do this using CSS.

My .aspx page is:

<asp:CheckBoxList ID="chkdisease" runat="server" RepeatColumns="2">
  <asp:ListItem> Spontaneous bleeding</asp:ListItem>
  <asp:ListItem>chiae (superficial tiny areas of bleeding into the skin resulting in small reddish spots) , Purpura (easy or excessive bruising),  Spontaneous bleeding from </asp:ListItem>
  <asp:ListItem>Fatigue</asp:ListItem>
  <asp:ListItem>Prolonged bleeding cuts,</asp:ListItem>
  <asp:ListItem>DVT (deep vein thrombosi</asp:ListItem>
</asp:CheckBoxList>

Can you show the rendered html instead of the asp please (unless you are wanting to add the styles server side) — Pete, Sep 19 '18 at 15:54
[How to change select box option background color?](https://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) — Win, Sep 19 '18 at 18:06

score 0 · Answer 1 · answered Sep 20 '18 at 06:19

Css code to change the background-color.

<style>
.MyClass input[type=checkbox]:checked + label 
{
background-color:red;
} 
</style>

And apply the class to your CheckBoxList. Like below

<asp:CheckBoxList ID="chkdisease" runat="server" RepeatColumns="2" CssClass="MyClass">
<asp:ListItem> Spontaneous bleeding</asp:ListItem>
<asp:ListItem>chiae (superficial tiny areas of bleeding into the skin resulting in 
 small reddish spots) , Purpura (easy or excessive bruising),  Spontaneous bleeding 
 from </asp:ListItem>
 <asp:ListItem>Fatigue</asp:ListItem>
 <asp:ListItem>Prolonged bleeding cuts,</asp:ListItem>
 <asp:ListItem>DVT (deep vein thrombosi</asp:ListItem>
 </asp:CheckBoxList>

How can I style my CheckBoxList in ASP.Net using CSS?

1 Answers1