css to checkbox контроля в меню аккордеона в asp.net - PullRequest
Новая
       22

css to checkbox контроля в меню аккордеона в asp.net

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

Я хочу изменить стиль списка флажков по умолчанию, доступный в веб-формах, я могу применить изменения к тексту, но не могу изменить флажок, который выглядит лучше и привлекательнее.

<div id="left_columnforSale">   
 <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordHeader" ContentCssClass="accordContent" HeaderSelectedCssClass="accordHeaderSelected"
           AutoSize="None"
            FadeTransitions="true"
            TransitionDuration="50"
            FramesPerSecond="20"
            RequireOpenedPane="false"
            SuppressHeaderPostbacks="True">
            <Panes>
              <asp:AccordionPane>
               <Header>
                &nbsp;&nbsp;&nbsp;CheckListBox
                </Header>
                 <Content>
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" 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>

            </Panes>
 </asp:Accordion>

CSS: 

#left_columnforSale .accordContent
{
color: #999999;
font-size: 11px;

}
#left_columnforSale .accordContent .chkbox td:hover
{
color: #606060;
text-decoration: underline;
cursor: pointer;
 }

Любые уроки; l или помощь будут оценены thnx

1 Ответ

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

Прежде всего, обратите внимание, что флажки далеко не гибкие. Браузеры не позволяют вам стилизовать их с помощью CSS. Любое решение на основе чистого CSS, которое не изменит внешний вид ваших флажков ... Для любого серьезного изменения стиля вам придется кодировать что-то в javascript, которое действует как флажок.

Если ваши изменения незначительны / могут быть сделаны в css:

Если вы хотите оформить все флажки непосредственно в вашем CSS, используйте следующий код: 

input[type="checkbox"]{
    /* Here are the styles that will be applied to ALL checkboxes */
}

Теперь, если вы хотите что-то конкретное для некоторых флажков, вы можете пойти с классами. Применяя класс CSS к вашему флажку напрямую. CssClass - это свойство для стандартных веб-элементов управления в ASP.NET, поэтому вы можете применить его к 

<asp:ListItem CssClass="checkbox" Value="0 AND 1000">0 - £1,000</asp:ListItem>

например.

Оттуда, в вашем CSS 

.checkbox {
    /* Here are the styles that apply to checkboxes that have the checkbox css class */
}

Если вы не можете сделать это с помощью CSS: Вот несколько примеров того, что вы можете сделать с помощью javascript / css: http://www.no -margin-for-errors.com / проекты / prettycheckboxes / http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...