Question

我有一个WP网站，我使用一个名为“Contact Form 7”的插件来创建表单。他们提供短代码，但我必须使用html才能为我的客户网站工作。

表单使用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”类添加到“li”元素。我怎样才能做到这一点？

Answer 1

您可以编写查找role属性的CSS规则，例如：

[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

如何使用role =“alter”作为triger将类添加到“li”元素

1 个答案: