CODEWITHSUNDEEP
asp.netcsscheckboxlist
Mr A
Mr A

Reputation: 6768

checkboxlist styling doesnt works

I have tried all possible ways to replace the default checkbox input button with an interactive gif image , I dont know what i am missing , any help or tutorial will be highly appreciated, below is the css snippet which i m using to apply the checkbox list:

#left_columnforSale .accordContent span.chkbox input[type="checkbox"]
{
/*background: url('../images/checkbox.gif') no-repeat;*/
background-color: #800000;
}

Sorcecode is :

<span id="ContentPlaceHolder1_CheckBoxList1" class="chkbox">
    <input id="ContentPlaceHolder1_CheckBoxList1_0" type="checkbox" name="ctl00$ContentPlaceHolder1$_content$CheckBoxList1$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$_content$CheckBoxList1$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="0 AND 1000" />
    <label for="ContentPlaceHolder1_CheckBoxList1_0">0 - £1,000</label>
    <br />
    <input id="ContentPlaceHolder1_CheckBoxList1_1" type="checkbox" name="ctl00$ContentPlaceHolder1$_content$CheckBoxList1$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$_content$CheckBoxList1$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="1000 AND 2000" />
    <label for="ContentPlaceHolder1_CheckBoxList1_1">£1,000 - £2,000</label>

and designer view:

   <asp:AccordionPane>
               <Header>
                &nbsp;&nbsp;&nbsp;CheckListBox
                </Header>
                 <Content>

                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" RepeatLayout="Flow" CssClass="chkbox">
                    <asp:ListItem Value="0 AND 1000">0 - £1,000</asp:ListItem>

                    <asp:ListItem Value="1000 AND 2000">£1,000 - £2,000</asp:ListItem>
                    <asp:ListItem Value="2000 AND 3000">£2,000 - £3,000</asp:ListItem>
                    <asp:ListItem Value="3000 AND 4000">£3,000 - £4,000</asp:ListItem>
                    <asp:ListItem Value="4000 AND 5000">£4,000 - £5,000</asp:ListItem>
                    <asp:ListItem Value="5000 AND 6000">£5,000 - £6,000</asp:ListItem>
                    <asp:ListItem Value="6000 AND 7000">£6,000 - £7,000</asp:ListItem>
                    <asp:ListItem Value="7000 AND 8000">£7,000 - £8,000</asp:ListItem>
                    <asp:ListItem Value="8000 AND 9000">£8,000 - £9,000</asp:ListItem>
                    <asp:ListItem Value="9000 AND 10000">£9,000 - £10,000</asp:ListItem>

                    </asp:CheckBoxList>

                </Content>

            </asp:AccordionPane>

Upvotes: 0

Views: 1819

Answers (2)

easwee
easwee

Reputation: 15905

Doing it with css is not possible/has big limitations since the browser will render default OS inputs no matter if you defined anything or not.

Styling checkboxes, dropdowns and radiobuttons is usually done with help of javascript since this will give you the most consistent results cross browsers.

Here's a way to do it: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Upvotes: 1

Ken Pespisa
Ken Pespisa

Reputation: 22266

Why not assign a CssClass to your list items? Might be easier than dealing with the long selector you have now.

Also, your selector looks correct and might be working perfectly. Setting the background color of a checkbox is one of those inconsistent things across browsers. See the examples here: http://www.456bereastreet.com/lab/form_controls/checkboxes

UPDATE:
If you'd like to test that your css selector is truly working correctly, comment out the background-color line, and add this instead:

#left_columnforSale .accordContent span.chkbox input[type="checkbox"]
{
/*background: url('../images/checkbox.gif') no-repeat;
 background-color: #800000;*/
display: none;
}

If the checkboxes disappear at least you know the selector is working.

Upvotes: 1

Related Questions