Adding “required” text to an HTML form via CSS

Question

I have a <form> that looks like this:

<form>
  <input type="text" name="name" id="name" /><span class="required"></span>
</form>

What I want to do is show some text, such as * or Required in the <span> element, instead of "hard coding" the text for every such place I need the text so the form looks something like this:

[input box] Required

I googled around and found that it could be done by a CSS style using content such as:

.required:before
{
  content: "aaaa"
}

But, should I be using this technique (is it supported in every major browser for example) or is there a more preferred way to do this sort of thing?

Thanks

UPDATE Ps. I don't want to use JavaScript for this, just plain CSS.

Answer 1

I think you should be looking at JavaScript. Adding content to tags with specific classes/ID is one thing JavaScript is used for. There are many libraries to speed up development time - jQuery, Prototype, Dojo and MooTools.

Answer 2

u can use jQuery for this thing.

jQuery is a javascript library:

write in header this code

$(document).ready(function(){
  $(span[class=required]).innerText='<sometext>';
});

but u must download this plugin. but u can use javascript too

Answer 3

Definitely shouldn't be using CSS to do that! God no! :p

As said above use javascript - but if you want to avoid that then you have to use Server Side Scripting - So get learning some PHP.

Answer 4

Check this : Content

aslo check this compatiblity

Don't use

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

Answer 5

I agree that adding content using CSS is not right in most cases. However, visually highlighting a required field I find totally okay to do this way.

content is not supported widely enough (IE doesn't support it at all IIRC).

What you could do is have the "required" span contain a background image containing the "required" text or an asterisk. Using graphical text has some downsides, but none that a jQuery based solution wouldn't have either.

Answer 6

As others have noted CSS can do this but it is not fully supported and it's also not the right way to approach this problem. If it's absolutely crucial for the "required" text to appear, then you must add it in the HTML. Javascript is a suitable solution to some extent but only if you can't edit the source code. Whilst content can be generated using JS, it's obviously only going to appear to people with JavaScript enabled, and it adds to the complexity of maintenance. When someone lokos at the page in five years' time to make a code change, they are initially going to wonder where the "required" text comes from.

One other option which would be fairly quick and quite neat would be to give the span a background image of an asterisk and include a key above the form:

* required field

Answer 7

You really should add this text in the HTML. The other solutions aren’t accessible — non-sighted users (for example) wouldn’t be aware that the field is required.