Marking Required Fields with * on Label

[ronleclairjr]

I have been searching for a way to use CSS to mark all required fields with an asterisk before the desired label text.

I am looking for something like:

<asp:Label Text="Name:" Runat="Server" CssClass="requiredLabel" />

Result would be:

* Name:


Thanks in advance for any help!!

[The Little Guy]

<span style="color:red;">*</span>

Why don't you just do this?

This will have some Javascript saying that a speciffic feild isn't filled out.
http://javascript.internet.com/forms/required-fields.html

[ray326]

There is a CSS mechanism to do that (http://www.w3.org/TR/CSS21/generate.html#x2) but a lot of browsers can't do it yet. The following works in Fx but not IE.

.requiredLabel:before { content:"*"; color:red }

Although I'd just use the class name "required" myself.

[NogDog]

You could use a background graphic that looks like an asterisk, perhaps? (Position it to the left or right with no-repeat, then set the padding for that side to leave room for it.)

[ray326]

Actually, I use both CSS and HTML for that. If they want to mark required inputs with a red asterisk then I put the asterisk in the label and

.required:first-letter { color:red; font-weight:bold }

<label class="required" for="fname">*First Name</label>

[ronleclairjr]

Ok everybody. Thanks for the feedback. I had thought of each of these. The reason I do not want to just color the label is because it is not good practice to just color things a different color, but to mark it as well... Although I don't always follow good practice, I thought maybe I would try this time. :) The reason I would like it in the css is in case I decide later on to change the color or the symbol or add the word 'required', I can change it just in one place.

The idea of javascript actually gave me an idea though. I have a pagetemplate that I can insert a snippet of javascript into to find the required labels somehow and format them correctly. Thanks for all of your feedback!!

[ray326]

a snippet of javascript into to find the required labels somehow and format them correctly.Well, if you also class your inputs as required you can actually hook the form validation into it, too.