复选框列表样式不起作用

Question

我已经尝试了所有可能的方法来用交互式 gif 图像替换默认的复选框输入按钮，我不知道我缺少什么，任何帮助或教程将不胜感激，下面是我用来应用复选框列表的 css 片段：

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

源代码是：

<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>

和设计器视图：

   <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>

Answer 1

使用 css 来实现这一点是不可能的/有很大的限制，因为无论您是否定义了任何内容，浏览器都会呈现默认的操作系统输入。

复选框、下拉菜单和单选按钮的样式通常是在 JavaScript 的帮助下完成的，因为这将为您提供跨浏览器最一致的结果。

这是一种方法： http://ryanfait.com/resources/custom -复选框和单选按钮/

Answer 2

为什么不为列表项分配一个 CssClass？可能比处理你现在拥有的长选择器更容易。

此外，您的选择器看起来正确并且可能工作正常。设置复选框的背景颜色是跨浏览器不一致的事情之一。请参阅此处的示例：http://www.456bereastreet.com/lab/form_controls/checkboxes

更新：
如果您想测试您的 css 选择器是否真正正常工作，请注释掉背景颜色行，然后添加以下内容：

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

如果复选框消失，至少您知道选择器正在工作。