Применение CSS к текстовому полю в элементе управления формы - PullRequest
Новая
       2

Применение CSS к текстовому полю в элементе управления формы

2 голосов
/ 29 мая 2011

Я пытаюсь применить стили CSS к текстовым полям внутри формы.Как правильно сделать это, так как форма не применяет приведенные ниже стили, является частью кода, где я пытался применить код 

<asp:FormView ID="FormView1" runat="server" BackColor="White" 
            BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            DataKeyNames="pappid" DataSourceID="applicantsbypappid" GridLines="Both"> 
<ItemTemplate>
               <%-- pappid:--%>
            <asp:Label ID="pappidLabel" runat="server" Text='<%# Eval("pappid") %>' />
            <br />

             <asp:Label ID="lblapplicantname" runat="server" CssClass="labels" Text="Applicant's Name:">
    </asp:Label>
    <asp:TextBox ID="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantmname"  runat="server" Text='<%# Bind("pappmname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantlname"  runat="server" Text='<%# Bind("papplname") %>'></asp:TextBox>

css code 

#txtapplicantfname
{
    width: 70px;
    border-bottom: 1px solid #0954A5;
    border-left-style: none;
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    font-size: 10px;
 }

Ответы [ 3 ]

2 голосов
/ 29 мая 2011

Я бы предложил вам назначить CSS напрямую, так как идентификатор элемента управления на стороне сервера отображается в полной иерархии с конкатенацией. Как и в вашем случае, будет Content Place Holder and a Textbox (ctl00_ContentPlaceHolder_txtapplicantfname). Если будет больше панелей; Tab Panel(ctl00_ContentPlaceHolder_TabPanelID_txtapplicantfname), и т. Д. Иерархия будет нарушена.

Вы можете сделать это как ... 

<asp:TextBox ID="txtapplicantfname" CssClass="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>


.txtapplicantfname
{
width: 70px;
border-bottom: 1px solid #0954A5;
border-left-style: none;
border-left-color: inherit;
border-left-width: 0;
border-right-style: none;
border-right-color: inherit;
border-right-width: 0;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0;
font-size: 10px;
}
0 голосов
/ 31 мая 2011

Дополнительно, в форме asp.net вы можете использовать 

 #<%= txtapplicantfname.ClientID%>
 {
      (...)
 }
0 голосов
/ 29 мая 2011

Вы знаете, что при использовании серверных элементов управления ASP.NET они преобразуются в теги HTML.Элемент управления TextBox будет отображаться в HTML как тег «input».Однако в процессе ASP.NET не присваивает тот же идентификатор тегу HTML.Это не будет «txtapplicantfname», это будет что-то вроде «ctl00_ContentPlaceHolder_txtapplicantfname».

Стили CSS применяются к тегам HTML, а не к коду ASP.NET.Таким образом, в таблице стилей CSS, если вы ссылаетесь на идентификатор элемента управления, вам нужно ссылаться на идентификатор отображаемого HTML-кода.Ваш стиль должен быть следующим: 

#ctl00_ContentPlaceHolder_txtapplicantfname
{
(...)

Просто отобразите свою страницу в навигаторе (или выполните в режиме отладки) и проверьте источник, чтобы получить реальные идентификаторы для тегов HTML.

...