HenryM HenryM - 5 months ago 20
HTML Question

CSS: How do I get wrapped labels to align

I've got some radio buttons which I'm formatting to look a little prettier than the standard CSS. When the text associated with the radio button is longer it wraps underneath the radio button and you cannot see some of the text. How do I get the text to wrap and align?

CSS:

body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}

form {
margin: 40px 0;
}

div {
clear: both;
margin: 0 50px;
}

label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}

/* hide input */
input.radio:empty {
margin-left: -999px;
}

/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}

input.radio:checked ~ label {
color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}

input.radio:checked ~ label {
color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}


HTML:

<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>

<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>

<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>

<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>


Here is a jsfiddle with my CSS and HTML.

Answer

change some css like

label {
    border: 1px solid #d1d3d4;
    border-radius: 3px;
    display: block; /* add this property */
    padding-left: 50px; /* add this property */
    width: 200px;
}
input.radio:empty ~ label {
    position: relative;
    float: left;
    line-height: 2.5em;
    /*text-indent: 3.25em; - remove this property*/
    margin-top: 2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

https://jsfiddle.net/gb8snazq/4/