Question

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

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

Sorcecode是：

<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

为什么不将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;
}

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

Answer 2

使用css执行此操作是不可能的/有很大的限制，因为无论您是否定义了任何内容，浏览器都将呈现默认的OS输入。

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

以下是一种方法：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

checkboxlist样式不起作用

2 个答案: