1

I am trying to get my radio buttons to align but I am having difficulty doing this. What I am trying to do is have the buttons align with an indentation because I am going to display a caret if the option has been selected. I also want the text to come up just a bit because it's not inline with the actual radio button.

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

Here is what it looks like right now.

enter image description here

3
  • it looks good for me
    – raven
    Sep 7, 2016 at 16:56
  • Please provide js fiddle Sep 7, 2016 at 17:02
  • Looks fine in the snippet...
    – Lee
    Sep 7, 2016 at 17:23

4 Answers 4

1

So I did a few things to your code:

  1. Align the items inside the label using inline-blocks:

    .radio label > span {
        display: inline-block;
        vertical-align: middle;
    }
    

    This is better than positioning using px.

  2. Now add the caret icon to both radio so that the horizontal alignment will be automatically done (and you can contextually show the green caret). To make that work apply these:

    .correct-answer {
      color: green;
    }
    .wrong-answer {
      opacity: 0;
    }
    

Let me know your feedback. Thanks!

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio label > span {
  display: inline-block;
  vertical-align: middle;
}
.correct-answer {
  color: green;
}
.wrong-answer {
  opacity: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x wrong-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

0
1

Try adding .radio span.button{ position:relative; top: 4px;} and input[type=radio] {margin:0;} to your css

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  margin:0;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio span.button{ position:relative; top: 4px;}
<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

0

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 5px;
  position:absolute;
  margin-top:3px;
}
<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

0

i did some changes in your dom as you want caret before radio button.you can set visibility of those caret when you dont want it to be visible as changing visibility will still occupy space on screen as compare to display:none which will affect indentation of radio

<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">True</span>
   </label>
</div>
<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">False</span>
   </label>
</div>

fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.