Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

This is a tip for Contact Form 7 plugin.

In default, a tag of checkbox type (checkbox and checkbox+) and radio button type (radio) are rendered as inline, like

You can reverse checkbox-label order by using label-first option with those tags.

A replaced HTML source of checkbox in default case looks like below (I added line breaks for better viewing):

<span style="position: relative;">
 <span class="wpcf7-checkbox">
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ウインダム" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ウインダム</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ミクラス" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ミクラス</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="アギラ" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">アギラ</span>
  </span>
 </span>
</span>

You can customize the layout with CSS trick.

If you want block layout instead of original inline one,

span.wpcf7-list-item { display: block; }

If you want table layout,

span.wpcf7-list-item { display: table-row; }
span.wpcf7-list-item * { display: table-cell; }

(combined with label-first option)

Notice: { display: table* } properties are not supported in Internet Explorer (even in IE7). I hate IE.