nathan rivera nathan rivera - 3 months ago 7
CSS Question

Is there a way to display text when a specific radio is clicked with CSS?

Basically what I'm trying to do is have a text field display with this string "Correct" appear below the radio if the correct radio has been clicked.

Here is what I have for the structure

<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>


I'm hoping there is a way to do this using CSS but I haven't been able to find much for what I'm trying to accomplish.

Answer

This is kinda not very nice solution but can be usable to some certain extend :)

Hope this helps :)

input[type="radio"] + label + span {
  display: none;
}
input[type="radio"]:checked + label + span {
  display: block;
}
<div id="question2">
  <div class="question">A JavaScript object is wrapped by what charaters?</div>
  <input type="radio" name="question2" value="a" />
  <label>[]</label><span><br/>Wrong answer.</span>
  <br />
  <input type="radio" name="question2" value="b" />
  <label>;;</label><span><br/>Wrong answer.</span>
  <br />
  <input type="radio" name="question2" value="c" />
  <label>{}</label><span><br/>Correct answer.</span>
  <br />
  <input type="radio" name="question2" value="d" />
  <label>()</label><span><br/>Wrong answer.</span>
</div>

Comments