How to Mark Fields as Required Using CSS

/* Displays an asterix to indicate what is required. But after attempting to submit display a red bar fo rany fields not completed. */


/*Start IE only - calls function to set add a span with a red asterisk in IE instead of using the ":before" pseudo class.  The function setIE6PreRequired is required. */
.preRequiredLabel {
        _left: expression(setIE6PreRequired(this));
}

.preRequiredLabel span {
    color: red !important;
    display: block !important;
    float: left;
}

.questionLabel span {
    color: blue;
    display: none;
}

/*End IE only*/

.preRequiredLabel_text {

}
.preRequiredLabel:before{
    content: "* ";
    color: red !important;
}

.requiredField_text, .requiredField_textarea, .requiredField_select, .requiredField_radio, .requiredField_date  {
    border-left: solid 4px red !important;
}
.requiredLabel_text, .requiredLabel_textarea, .requiredLabel_select, .requiredLabel_radio, .requiredLabel_date {
    color: #404142 !important;
}

/* End Required Fields */

/* Start Required Fields */

// Inserts the red asterisk before required questions in IE.  Other browsers us the psudo class of :before.  IE must use this javascript and styling.
// IE ONLY - used with the styles "preRequiredLabel", "preRequiredLabel span", and "questionLabel span" to seadd red asterisk in front of required questions.
function setIE6PreRequired(obj) {
    var html = obj.innerHTML;
    
    if (html.indexOf("*")==-1) {
        html = "<span>*</span>"+html;
        obj.innerHTML = html;
    }
}