Question

I am trying to find a way to highlight some required fields in a form.
I don’t have access to the label settings for this application, so I’d like to try finding a character within the label and change it to be more prominent.

The current label for required fields is set as this example:

<label>First Name *</label>

I would like to find all instances of the asterisk * within label tags in a page and wrap them inside a CSS class so I can either set color or replace with an image.
Is that achievable?

Thank you in advance.

Answer 1

find all labels contain an asterisk,
replace the html with your element

 $("label:contains('*')").each(function(){
   var r = $(this).html().replace('*',','<sup class="conditions">*</sup>');
   $(this).html(r);
 });

but this could be done much nicer/faster with css:

 label.requiredField:after {
    content: "*";
    color:#f00;
 }

 /** your HTML would be **/
 <label class="requiredField">First Name</label>

 /** and renders like: **/
 First Name*

more here: http://www.quirksmode.org/css/beforeafter.html