I am trying to apply css styles to textboxes within a formview. What is the correct way to do this as the form is not applying the styles below is part of the code where i was trying to apply the code
<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;
}
I would suggest you to assign the css directly, as the server side control ID renders in complete hierarchy with concatenation. Like in your case, there will be a Content Place Holder and a Textbox (ctl00_ContentPlaceHolder_txtapplicantfname)
. If there will be any more panels; Tab Panel(ctl00_ContentPlaceHolder_TabPanelID_txtapplicantfname)
, etc involve hierarchy will be disturbed.
You can do it like...
<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;
}