Use checkbox for list-style-type in unordered list in HTML

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 as the checkbox is not present on a different line that the rest of the html inside <li>.

Answer 1

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.

ul {
    list-style-type:none;
}

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

Answer 2

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

ul {
  list-style-type: none;
}

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