Mar 14 2018
Improve on Github

How to create responsive vertically aligned multiline radio button labels

Step-by-step instructions for creating responsive vertical radio buttons with nicely aligned multiline labels (using either plain CSS or Foundation 6).

Fiddle example

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- optionally include the Foundation 6 framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" />

<p>What is your favorite Pokemon?</p>

<div class="vertical-radio-buttons">
  <fieldset>
    <form>
      <div>
        <span>
          <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Pokemon Red</label>
        </span>
      </div>

      <div>
        <span>
          <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Multiline Pokemon Blue. Multiline Pokemon Blue. Multiline Pokemon Blue. Multiline Pokemon Blue. Multiline Pokemon Blue. </label>
        </span>
      </div>

      <div>
        <span>
          <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow" required><label for="pokemonYellow">Pokemon Yellow</label>
        </span>
      </div>

    </form>
  </fieldset>
</div>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.vertical-radio-buttons div {
  display: block;
  padding: 0 0 5px 5px;
  clear: both;
}

.vertical-radio-buttons span {
  display: block;
  padding-left: 20px;
  cursor: inherit;
}

.vertical-radio-buttons label {
  font-size: rem-calc(16);
}

.vertical-radio-buttons input {
  float: left;
  width: 20px;
  margin-left: -20px;
  margin-top: 6px; // vertically align radio button with text
  padding: 0;
  -webkit-appearance: radio;
}