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: 
Your question is not very clear.

`list-style-type` is used to change the aesthetics of the bullets, but they can't have a specific function. In the example below, I used this property to remove the bullets.

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

```html
<ul>
    <li><input type="checkbox"> whatever</li>
    <li><input type="checkbox"> whatever</li>
 <ul>
```

**EDIT**

Based on your fiddle, you could try this so the checkbox will be aligned with the word.

```
<ul>
    <li>

        <dl>
          <dt> <input type="checkbox"> Coffee </dt>
          <dd> Black, Strong <dd>
      </dl>
    </li>
    <li>

        <dl>
          <dt> <input type="checkbox"> Tea </dt>
          <dd> Exotic </dd>
</ul>

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