Simple Multiple Choice | HTML, CSS

by Adi Jaya

HTML

<ol>
  <li>
  	<p>Hello ...?</p>
    <ul class="choice">
      <li>
        <label>
        	<input name="q-1" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-1" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-1" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
    </ul>
  </li>
  <li>
  	<p>Hello 2 ...?</p>
    <ul class="choice">
      <li>
        <label>
        	<input name="q-2" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-2" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-2" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
    </ul>
  </li>
  <li>
  	<p>Hello 3 ...?</p>
    <ul class="choice">
      <li>
        <label>
        	<input name="q-3" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-3" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-3" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
      <li>
        <label>
        	<input name="q-3" type="radio" class="radio-choice"/>
          	<span>xxxx</span>
        </label>
      </li>
    </ul>
  </li>
</ol>

CSS

body {
  	font-family: sans-serif;
}

.choice {
    list-style: upper-alpha;
    padding-inline-start: 20px;
}

.choice li {
    margin-bottom: 5px;
}

.choice span {
  	cursor: pointer;
}

.radio-choice {
  	display: none;
}

.radio-choice:checked ~ span {
  	background: cyan;
}