1

我正在尝试使表单中的必填字段显示为红色，但我没有任何运气。下面是我的表单和我尝试过的 css。

联系人.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>

样式.css

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

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

1 回答 1

3

由于该<input>元素具有 required 属性并出现在 之后<label>，因此您需要一个先前的兄弟选择器，不幸的是 CSS 中不存在该选择器。您不能在 CSS 中 向后选择，只能向前选择。

您可以使用+选择器，但它需要重新排列您的 HTML，以便在<label>之后<input>，一旦您这样做，这将起作用：

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

如果这不是可取的，您需要为标签提供一个您可以使用的自己的类，例如<label class="required">...</label>.

请参阅此相关问题：与相邻兄弟选择器相反？

于 2013-05-01T15:18:58.427 回答