CSS Radio checklist looks like shit

Hey, was just wondering how I can make my radio checklist look better, and not so jumbled together. Thanks.

You have errors in your HTML. Run it through a validator and fix the errors.

For the specific part you asked about the HTML should look like this:

<div>
  <p><strong>How likely are you to return to BJ's Steakhouse?</strong></p>
  <label for="name">
    <input name="user-recommend" value="definitely" type="radio" class="input-radio" checked="">
    <strong>Definitely</strong>
  </label>

  <label>
    <input name="user-recommend" value="maybe" type="radio" class="input-radio">
    <strong>Maybe</strong>
  </label>

  <label>
    <input name="user-recommend" value="maybe" type="radio" class="input-radio">
    <strong>Not Sure</strong>
  </label>
</div>

BTW, the for attribute value you have given on the first label (name) will match the name input you have at the top, so when you click the label for “Definitely” it will jump to the name input. That is not what you want.

1 Like