Geek asks and answers

Make radio station group tags nicely embedded with radio buttons using pure CSS

I used to use a table to display radio buttons with labels. Now I'm trying to do the same, using only CSS.

this was made using a table

What can I do in CSS that makes the label text sit on top of the corresponding radio button? This is HTML:

<div class="controls">
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1">
        Never
    </label>
    <label class="radio">
         <input type="radio" name="cfimb_5" id="id_cfimb_5_2" value="2">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_3" value="3">
        Sometimes
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_4" value="4">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_5" value="5">
        Frequently
    </label>
</div>

Here is the code: http://codepen.io/anon/pen/keuhl

+3
source share
1 answer

Positioning radio stations under the tags is not as clean as some might want without any additional DOMs, but here's a general idea of ​​what works:

.controls label {
    display: inline-block;
    width: 90px;
    height: 20px;
    text-align: center;
    vertical-align: top;
    padding-top: 40px;
}
.controls input {
    display: block;
    margin: 0 auto -40px;
}
<div class="controls">
  <label class="radio">
    <input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1">
    Never
  </label>
  <label class="radio">
     <input type="radio" name="cfimb_5" id="id_cfimb_5_2" value="2">
  </label>
  <label class="radio">
    <input type="radio" name="cfimb_5" id="id_cfimb_5_3" value="3">
    Sometimes
  </label>
  <label class="radio">
    <input type="radio" name="cfimb_5" id="id_cfimb_5_4" value="4">
  </label>
  <label class="radio">
    <input type="radio" name="cfimb_5" id="id_cfimb_5_5" value="5">
    Frequently
  </label>
</div>
Run codeHide result
+6
source

More articles:


All Articles