将CSS应用于formview控件中的文本框

时间:2011-05-29 00:22:44

标签: .net asp.net css formview

我正在尝试将css样式应用于formview中的文本框。正确的方法是什么,因为表单没有应用下面的样式是我试图应用代码的代码的一部分

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

#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 个答案:

答案 0 :(得分:2)

我建议你直接分配css,因为服务器端控件ID在带有连接的完整层次结构中呈现。就像你的情况一样,会有一个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;
}

答案 1 :(得分:0)

您知道当您使用ASP.NET服务器控件时,它们会转换为HTML标记。 TextBox控件将以HTML格式呈现为“输入”标记。但是,在此过程中,ASP.NET不会为HTML标记提供相同的ID。它不会是“txtapplicantfname”,它将类似于“ctl00_ContentPlaceHolder_txtapplicantfname”。

CSS样式适用于HTML标记,而不适用于ASP.NET代码。因此,在CSS样式表中,如果引用控件ID,则需要引用呈现的HTML代码的ID。你的风格应该是:

#ctl00_ContentPlaceHolder_txtapplicantfname
{
(...)

只需在导航器中显示您的页面(或在调试模式下执行)并检查源代码以获取HTML标记的真实ID。

答案 2 :(得分:0)

此外,在asp.net表单中,您可以使用

 #<%= txtapplicantfname.ClientID%>
 {
      (...)
 }