Question

我正在尝试将表单中的必填字段显示为红色，但我没有运气。下面是我的表格和我尝试的CSS。

contact.html

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

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

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

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

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

的style.css

label[required=required]{
    color: darkred;
}

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

Answer 1

由于<input>元素具有必需属性并显示在<label>之后，因此您需要一个先前的兄弟选择器，遗憾的是CSS中不存在该选择器。你不能在CSS中选择向后，只能转发。

您可以使用+选择器，但需要重新排列HTML，以便<label>位于<input>之后，一旦执行此操作，这将有效：

input[required]+label {
    background: red;
}

如果这不合适，您需要为标签指定一个可以使用的类，例如<label class="required">...</label>。

请参阅此相关问题：Opposite of adjacent sibling selector?

使用css3和jquery.validate使必填字段显示为红色

1 个答案: