如何使用role =「alter」作爲triger將類添加到「li」元素

我有一個WP網站，我使用名爲「Contact Form 7」的插件來創建表單。他們提供簡碼，但我必須使用html才能爲我的客戶的網站工作。如何使用role =「alter」作爲triger將類添加到「li」元素

表單使用ARIA和role =「alter」在驗證失敗時顯示錯誤消息。我需要更改未能驗證的框的設計，但我無法找到添加類的方法。

這裏的HTML：

<div class="browser_gecko form_wrapper wpcf7" id="wpcf7-f46-p47-o1" lang="en-US" dir="ltr"> 
      <div class="screen-reader-response"></div> 
      <form action="/form/#wpcf7-f46-p47-o1" method="post" class="wpcf7-form" novalidate="novalidate"> 
      <div style="display: none;"> 
     <input type="hidden" name="_wpcf7" value="46" /> 
     <input type="hidden" name="_wpcf7_version" value="4.1.1" /> 
     <input type="hidden" name="_wpcf7_locale" value="en_US" /> 
     <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f46-p47-o1" /> 
     <input type="hidden" name="_wpnonce" value="229223424d" /> 
     </div> 
     <div class="wpcf7-response-output wpcf7-display-none validation_error"></div> 
      <div class='form_body'> 
       <ul class='form_fields top_label description_below'> 
       <li class='field field_contains_required' > 
        <label class='field_label'>Name<span class='field_required'>*</span></label> 
        <div class='input_container'><input type='text' name='your-name' class="large wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" tabindex='1' /></div> 
        </li> 
        <li class='field'><label class='field_label'>Company</label> 
        <div class='input_container'><input type='text' name='COMPANY' class="large wpcf7-form-control wpcf7-text" aria-invalid="false" tabindex='2' /></div> 
        </li> 
        <li id='field_4' class='field field_contains_required' ><label class='field_label'>Email<span class='field_required'>*</span></label> 
        <div class='input_container'><input type='email' name='your-email' class="large pcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" tabindex='3' aria-required="true" aria-invalid="false" /></div></li> 
        <li id='field_5' class='field field_contains_required'><label class='field_label'>Inquiry<span class='field_required'>*</span></label> 
        <div class='input_container'><textarea name='your-message' tabindex='4' rows='10' cols='50' class="textarea medium wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></div></li>     
       </ul> 
       </div> 
     <div class='form_footer top_label'><input type='submit' value='Submit' class="button gform_button wpcf7-form-control wpcf7-submit" /></div>   
         </form> 
         </div>

我要上課「form_error」添加到「禮」元素時驗證失敗。我該如何做到這一點？

來源

2015-04-23 kat_indo

你能指出要準確定位的元素？ – Stickers

你可以寫一個CSS規則，將查找role屬性，例如：

[role=alter] { 
 
    color: red; 
 
}

<ul> 
 
    <li role="alter">I am altered</li> 
 
    <li>I am not altered</li> 
 
</ul>

參考：http://www.w3.org/TR/css3-selectors/#attribute-selectors

來源

2015-04-23 00:10:31

我看到了邏輯，但是我的問題是角色=「alter」與「li」元素位於不同的div，因此它不會影響它們。 –

您實際上沒有具體說明角色屬性分配的位置。你能澄清嗎？ –

你可以在我所包含的HTML代碼中看到它的位置。 –

如何使用role =「alter」作爲triger將類添加到「li」元素

回答

相關問題