Question: I am trying to make a bulleted list on a webpage and I need my bullets to function like checkboxes which the user can select. I want to, then, use them to execute some function based on the list elements that the user has selected. Also, each of those `<li>` further contains a `description list`.

`list-style-type` does not have such an option. I tried to append an input tag to the `<li>` such:  

`<input type= "checkbox">`
But this [looks too ugly](https://codepen.io/anon/pen/bKVBmB) as the checkbox is not present on a different line that the rest of the html inside `<li>`.

Answer: 
Is it something like this that you're looking for.

```css
ul {
  list-style-type: none;
}
```

```html
<ul>
  <li>
    <dl>
      <dt> <label><input type="checkbox">Coffee</label> </dt>
      <dd> Black, Strong<dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt> <label><input type="checkbox">Tea</label> </dt>
      <dd> Exotic<dd>
    </dl>
  </li>
</ul>
```
It looks like you want a list with the `list-style-type` set to `none`

HTML

```
<ul>
    <li>
        <input type="checkbox"> check 1
    </li>
    <li>
        <input type="checkbox"> check 2
    </li>
    <li>
        <ul>
            <li>
                <input type="checkbox"> check 3
            </li>
            <li>
                <input type="checkbox"> check 4
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox"> check 5
    </li>
      <li>
        <input type="checkbox"> check 6
    </li>
</ul>

```

CSS

```
ul {
  list-style-type: none;
}

```

Codepen example: <https://codepen.io/Washable/pen/MXabVO>