How to Mark Fields as Required Using CSS

It's convenient to include a visible symbol for required fields in the CSS, so you don't have to remember to put a * on the required fields. This also makes it possible to mark conditionally required fields appropriately.

The following content should be placed in a Cascading Style Sheet or within a <style> tag. Note that the beginning of this CSS is only required to accommodate Internet Explorer.

/* 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 {

    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 */

The following content should be placed in a JavaScript file or within a <script> tag.

/* 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;