title: Custom Radio CSS and multiline text wrapping
body: <p>I've customised our radio buttons for a survey form using CSS. However as the standard radio button is hidden, when text is long it wraps below the replacement graphic.</p>
  
  <p>We are trying to avoid editing the HTML as this part has been generated by our CRM system and to edit the HTML would mean that we would have to rebuild the entire survey from scratch and time is of the essence!</p>
  
  <p>I don't have enough rep to post the image, but here's a link to it <a href="http://i.stack.imgur.com/YV79T.png" rel="nofollow">http://i.stack.imgur.com/YV79T.png</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;td style="vertical-align: top;"&gt;
      &lt;input name="q_197" value="1042" id="q_197_1042" type="radio"&gt;
      &lt;label for="q_197_1042"&gt;I didn't get the chance to say everything I wanted 
  to about stuff&lt;/label&gt;
      &lt;/td&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>label {
      min-width: 230px;
      padding-right: 10px;
      border-radius:3px;
      border:1px solid #D1D3D4;
  }
  
  /* hide input */
  
  
  input[type=radio]:empty {
      display:none;
  }
  /* style label */
  
  
  
  input[type=radio]:empty + label {
      position:relative;
      float:left;
      line-height:2.5em;
      text-indent:3em;
      margin:5px 1px 5px;
      cursor:pointer;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
  }
  
  input[type=radio]:empty + label:before {
      position:absolute;
      display:block;
      top:0;
      bottom:0;
      left:0;
      content:'';
      width:2em;
      background:#D3D3DB;
      border-radius:3px 0 0 3px;
  }
  
  
  /* toggle hover */
  
  
  input[type=radio]:hover:not(:checked) + label:before {
      content:'\2714';
      text-indent:.6em;
      color:#C2C2C2;
  }
  
  input[type=radio]:hover:not(:checked) + label {
      color:#888;
  }
  
  /* toggle on */
  
  
  input[type=radio]:checked + label:before {
      content:'\2714';
      text-indent:.6em;
      color:#F4F5F8;
      background-color:#0099FF;
  }
  
  input[type=radio]:checked + label {
      color:#777;
  }
  
  /* radio focus */
  
  
  input[type=radio]:focus + label:before {
      box-shadow:0 0 0 3px #999;
  }
  
  textarea {
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
  </code></pre>