After customizing our radio buttons for a survey form using CSS, we encountered an issue where the text wraps below the replacement graphic when it is too long. We want to avoid modifying the HTML as it has been generated by our CRM system, and making changes would require us to rebuild the entire survey from scratch which is time-consuming!
Unfortunately, I am unable to post the image here, but you can view it by following this link: https://i.sstatic.net/YV79T.png
HTML
<td style="vertical-align: top;">
<input name="q_197" value="1042" id="q_197_1042" type="radio">
<label for="q_197_1042">I didn't get the chance to say everything I wanted
to about stuff</label>
</td>
CSS
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%;
}