Styling ASP.Net forms with CSS

Question

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.

David · Accepted Answer · 2012-04-19 16:30:47Z

6

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>

edited Apr 19, 2012 at 16:30

answered Apr 19, 2012 at 16:11

David

73.7k19 gold badges134 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Brian Over a year ago

do I apply the cssclass to the asp:Panel or ContentPlaceHolder?

David Over a year ago

I usually apply it to the Panel, but if you're using Visual Studio, even a free version, Intellisense should help you to determine if the cssClass property is available for a given tag.

Brian Over a year ago

Problem is if I do this all my forms get given the same style, since there can be only one form tag.

Brian Over a year ago

Infact, cssClass doesn't even show up on <form > when I create one in the Master page.

David Over a year ago

Good point. I updated the code to give a better answer. "CssClass" is purely an asp.net thing. You can just use "class" and it should work.

|

SaravananArumugam · Accepted Answer · 2012-04-19 16:11:25Z

1

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

answered Apr 19, 2012 at 16:11

SaravananArumugam

3,7206 gold badges36 silver badges46 bronze badges

Comments

D'Arcy Rittich · Accepted Answer · 2012-04-19 16:11:01Z

0

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%; 
....

answered Apr 19, 2012 at 16:11

D'Arcy Rittich

172k41 gold badges298 silver badges287 bronze badges

Comments

ericb · Accepted Answer · 2012-04-19 16:12:25Z

0

Have you tried the ClientID property of your controls?

Also on your css you can do something like:

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

answered Apr 19, 2012 at 16:12

ericb

3,4101 gold badge24 silver badges21 bronze badges

Comments

Jonathan Wood · Accepted Answer · 2012-04-19 16:12:41Z

0

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.

answered Apr 19, 2012 at 16:12

Jonathan Wood

68.1k86 gold badges308 silver badges542 bronze badges

Comments

Matthew · Accepted Answer · 2012-04-19 16:16:31Z

0

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.

answered Apr 19, 2012 at 16:16

Matthew

35 bronze badges

Collectives™ on Stack Overflow

Styling ASP.Net forms with CSS

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related