<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[iDeasilo]]></provider_name><provider_url><![CDATA[https://ideasilo.wordpress.com]]></provider_url><author_name><![CDATA[Takayuki Miyoshi]]></author_name><author_url><![CDATA[https://ideasilo.wordpress.com/author/miyoshita/]]></author_url><title><![CDATA[Custom layout for checkboxes and radio buttons (Contact Form 7&nbsp;tips)]]></title><type><![CDATA[link]]></type><html><![CDATA[<p>This is a tip for <a href="https://ideasilo.wordpress.com/2007/04/30/contact-form-7/">Contact Form 7</a> plugin.</p>
<p>In default, a tag of checkbox type (<code>checkbox</code> <del datetime="2007-12-30T12:17:22+00:00">and <code>checkbox+</code></del>) and radio button type (<code>radio</code>) are rendered as inline, like</p>
<p><img src="https://ideasilo.files.wordpress.com/2007/12/checkbox-orig.png" border="1" /></p>
<p>You can reverse checkbox-label order by <a href="https://ideasilo.wordpress.com/2007/12/25/contact-form-7-173/">using <code>label-first</code> option with those tags</a>.</p>
<p><img src="https://ideasilo.files.wordpress.com/2007/12/checkbox-label-first.png" border="1" /></p>
<p>A replaced HTML source of <code>checkbox</code> in default case looks like below (I added line breaks for better viewing):</p>
<pre class="brush: xml; title: ; notranslate" title="">
&lt;span style=&quot;position: relative;&quot;&gt;
 &lt;span class=&quot;wpcf7-checkbox&quot;&gt;
  &lt;span class=&quot;wpcf7-list-item&quot;&gt;
   &lt;input name=&quot;your-checkbox&quot; value=&quot;ウインダム&quot; 
     class=&quot;exclusive&quot; type=&quot;checkbox&quot;&gt;&amp;nbsp;
   &lt;span class=&quot;wpcf7-list-item-label&quot;&gt;ウインダム&lt;/span&gt;
  &lt;/span&gt;
  &lt;span class=&quot;wpcf7-list-item&quot;&gt;
   &lt;input name=&quot;your-checkbox&quot; value=&quot;ミクラス&quot; 
     class=&quot;exclusive&quot; type=&quot;checkbox&quot;&gt;&amp;nbsp;
   &lt;span class=&quot;wpcf7-list-item-label&quot;&gt;ミクラス&lt;/span&gt;
  &lt;/span&gt;
  &lt;span class=&quot;wpcf7-list-item&quot;&gt;
   &lt;input name=&quot;your-checkbox&quot; value=&quot;アギラ&quot; 
     class=&quot;exclusive&quot; type=&quot;checkbox&quot;&gt;&amp;nbsp;
   &lt;span class=&quot;wpcf7-list-item-label&quot;&gt;アギラ&lt;/span&gt;
  &lt;/span&gt;
 &lt;/span&gt;
&lt;/span&gt;
</pre>
<p>You can customize the layout with CSS trick.</p>
<p>If you want block layout instead of original inline one,</p>
<pre class="brush: css; title: ; notranslate" title="">span.wpcf7-list-item { display: block; }</pre>
<p><img src="https://ideasilo.files.wordpress.com/2007/12/checkbox-block.png" border="1" /></p>
<p>If you want table layout,</p>
<pre class="brush: css; title: ; notranslate" title="">
span.wpcf7-list-item { display: table-row; }
span.wpcf7-list-item * { display: table-cell; }
</pre>
<p><img src="https://ideasilo.files.wordpress.com/2007/12/checkbox-table.png" border="1" /> (combined with <code>label-first</code> option)</p>
<p><strong>Notice:</strong> <code>{ display: table* }</code> properties are not supported in Internet Explorer (even in IE7). <strong>I hate IE.</strong></p>
]]></html><thumbnail_url><![CDATA[https://i1.wp.com/ideasilo.wordpress.com/files/2007/12/checkbox-orig.png?fit=440%2C330]]></thumbnail_url><thumbnail_width><![CDATA[240]]></thumbnail_width><thumbnail_height><![CDATA[60]]></thumbnail_height></oembed>