стилизация checkboxlist не работает - PullRequest
Новая
       8

стилизация checkboxlist не работает

0 голосов
/ 11 апреля 2011

Я перепробовал все возможные способы замены кнопки ввода флажка по умолчанию на интерактивное изображение 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>

Ответы [ 2 ]

1 голос
/ 11 апреля 2011

Выполнение этого с помощью css невозможно / имеет большие ограничения, поскольку браузер будет отображать входные данные ОС по умолчанию независимо от того, что вы определили, или нет.

Стилизация флажков, выпадающих меню и радиокнопок обычно выполняется с помощью javascript, так как это даст вам наиболее согласованные результаты для разных браузеров.

Вот способ сделать это: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

1 голос
/ 11 апреля 2011

Почему бы не назначить CssClass вашим элементам списка? Это может быть проще, чем иметь дело с длинным селектором, который у вас есть сейчас.

Кроме того, ваш селектор выглядит правильно и может работать отлично. Установка цвета фона флажка - одна из тех противоречивых вещей в браузерах. Смотрите примеры здесь: http://www.456bereastreet.com/lab/form_controls/checkboxes

UPDATE:
Если вы хотите проверить, правильно ли работает ваш css-селектор, закомментируйте фоновую линию цвета и добавьте вместо этого: 

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

Если флажки исчезают, по крайней мере, вы знаете, что селектор работает.

...