CODEWITHSUNDEEP
asp.netcss
Brian
Brian

Reputation: 773

Styling ASP.Net forms with CSS

I'm transitioning a website from plain html to ASP.Net.

I have two forms in the website frmRegister and frmLogin

I have css for the each of these like this...

form#frmRegister .floatRight input{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
font-weight: normal;
}

form#frmRegister .textRow input, form#frmRegister .textRow textarea, form#frmLogin                 .textRow input, form#frmLogin .textRow textarea, form#frmRegister .textRow select{
width: 90%;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.9em;
 border: 1px solid #a1d19d;
}

but because asp renames the forms to aspNetform, the styles are not applied.

I tried adding aspNetform to the css but then every form gets given the same style.

I'm using master pages btw.

Upvotes: 0

Views: 8976

Answers (6)

David
David

Reputation: 73604

Don't style your CSS by ID. Use CSS classes instead.

<form id="myForm" runat="Server" class="someClass">

in css:

.someClass {background-color: blue; color:red; }

Although technically, I've never applied css to a form, so I'm not 100% sure the above will work. If I need to do that, I nest a div within the form, and apply the style to the div. So I'd change

<form id="myForm" runat="Server" class="someClass">
...
</form>

to 

<form id="myForm" runat="Server" >
   <div class="someClass">
      ...
   </div>
</form>

Upvotes: 6

Matthew
Matthew

Reputation: 3

Are you embedding the styles in the pages/master page or is it in an external file? If you add the styles to the master page it will affect all of its child pages.

Upvotes: 0

Jonathan Wood
Jonathan Wood

Reputation: 67345

Yes, forms represent a special element in a webforms app. Better to just define a class and apply that to your form, or even putting a div within the form and styling that.

Also, one big advantage over regular HTML is that you can stick all this in a master page. This way, you can tweak your overall page layout only in one place (the master page) and have those changes reflected on every page.

Upvotes: 0

ericb
ericb

Reputation: 3410

Have you tried the ClientID property of your controls?

Also on your css you can do something like:

form#<%=myControl.ClientID%>{
    /* css in here */
}

Upvotes: 0

SaravananArumugam
SaravananArumugam

Reputation: 3720

Try giving the style based on the class name, instead of the ID.

Upvotes: 1

D&#39;Arcy Rittich
D&#39;Arcy Rittich

Reputation: 171569

I don't work with web forms, so there may be a better solution, but you could just address your forms via CSS classes rather than ids.

E.g., add a class frmRegister to that form tag, and then address it in CSS like this:

form.frmRegister .floatRight input{ width: 100%; 
....

Upvotes: 0

Related Questions