Make required fields appear red using css3 and jquery.validate

I'm trying to make required fields in a form to appear red, but am not have any luck. Below is my form and the css I have tried.


                        <h2>Send us an email...</h2>

                                <label for="senderName"  >Your Name</label>
                                <input type="text" name="senderName" id="senderName" required="required" placeholder="Please type your name"   maxlength="40" />

                                <label for="senderEmail" >Your Email Address</label>
                                <input type="email" name="senderEmail" id="senderEmail" required="required"  placeholder="Please type your email address"   maxlength="50" />

                                <label for="message" style="padding-top: .5em;" >Your Message</label>
                                <textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea>

                        <div id="formButtons">
                            <input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />
                            <input type="button" id="cancel" name="cancel" value="Cancel" />


    color: darkred;

label[] > input[required="required"] {
    background: red;  }


Since the <input> element has the required attribute and appears after the <label>, you would want an previous sibling selector, which unfortunately does not exist in CSS. You cannot select backwards in CSS, only forwards.

You could use the + selector but it would require re-arranging your HTML so that the <label> is after the <input>, Once you do this, this would work:

input[required]+label {
    background: red;

If this is not desirable, you would need to give the label a class of its own which you can use, like <label class="required">...</label>.

See this related question: Opposite of adjacent sibling selector?

Need Your Help

Pass variable to template on redirect - Laravel4

php laravel laravel-4

I try to pass a variable to template class, on a redirect, but if i try to access this variable on template, i give this error: