使所需的字段顯示爲紅色使用css3和jquery.validate

我試圖使必填字段在窗體中顯示爲紅色，但我沒有任何運氣。下面是我的表格和我試過的CSS。使所需的字段顯示爲紅色使用css3和jquery.validate

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; }

來源

2013-05-01 Antarr Byrd

由於<input>元素具有必需屬性和<label>後出現，你會希望有一個以前的兄弟選擇，不幸的是不不存在於CSS中。您不能在CSS中選擇向後，只能轉發。

您可以使用+選擇，但它需要重新安排你的HTML，這樣的<label>是<input>後，一旦你這樣做，這會工作：

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

如果這是不可取的，您需要爲該標籤指定一個您可以使用的類別，例如<label class="required">...</label>。

看到這個相關的問題：Opposite of adjacent sibling selector?

來源

2013-05-01 15:18:58 nullability

這有效，但它拋出窗體的佈局。這個標籤現在出現在輸入框的前面，在它的前面 – 2013-05-01 15:28:39

是的，如果這是不可接受的，那麼你需要給該標籤一個類，例如「required」，並且只需要'label.required {background：red; }'。 – nullability 2013-05-01 15:30:27

好的謝謝。有沒有一種方法可以爲標籤提供必需的屬性，並使用該屬性進行選擇。 – 2013-05-01 15:32:51

使所需的字段顯示爲紅色使用css3和jquery.validate

回答

相關問題