# CSS Radio checklist looks like shit

**URL:** <https://forum.freecodecamp.org/t/css-radio-checklist-looks-like-shit/418341>\
**Category:** General\
**Created:** [September 1, 2020, 4:16am UTC](https://forum.freecodecamp.org/t/css-radio-checklist-looks-like-shit/418341 "2020-09-01T04:16:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MC92](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@MC92](https://forum.freecodecamp.org/u/MC92)\
**Post date:** [September 1, 2020, 4:16am UTC](https://forum.freecodecamp.org/t/css-radio-checklist-looks-like-shit/418341/1 "2020-09-01T04:16:35Z")

</div>

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

> **[BJ's Steakhouse Survey](https://codepen.io/milton-chan/pen/XWdMEJY)**
>
> ...

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [September 1, 2020, 5:07am UTC](https://forum.freecodecamp.org/t/css-radio-checklist-looks-like-shit/418341/2 "2020-09-01T05:07:44Z")

</div>

You have errors in your HTML. Run it through a [validator](https://validator.w3.org/#validate_by_input) and fix the errors.

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:41pm UTC](https://forum.freecodecamp.org/t/css-radio-checklist-looks-like-shit/418341/3 "2021-06-01T18:41:41Z")

</div>

Closed on June 1, 2021, 6:41pm UTC