How to Style a List of Checkboxes

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

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>

Styling a list of checkboxes with a label

This will solve the issue in IE.

#options label {
  float: left;
  clear: left;
}

clear makes the element drop below any floated elements that
precede it in the document.

A good diagramatic example is available in https://stackoverflow.com/a/1012141/1671639.

Check this JSFiddle in IE.

Is it possible to set special styles to checkboxes when all of them are unchecked using only CSS?

Lasciate ogni speranza, voi ch’entrate

No. There are no such CSS selectors that allows to select previous DOM elements in dependence on state of following elements. See Is there a “previous sibling” CSS selector? and Is there a CSS parent selector? posts for details.

Is it possible to style a checkbox like this?

The best way to do this is to remove the default appearance of the checkbox using appearance: none;. From there, you can change anything about its style you want to. Here is an example that gets close to what you are wanting.

/* The checkbox holder */
.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* The checkbox */
.checkbox > input {
  /*
    Remove the default appearance.
  */
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  
  
  /*
    Set the size of the checkbox.
  */
  width: 20px;
  height: 20px;
  
  box-shadow: 0 0 0 2px black; /* Outer border */
  border: 3px solid white; /* Inner border */
}

/* The checkbox - when checked */
.checkbox > input:checked {
  background-color: black; /* The "check" */
}

<h1>Item List</h1>
<div class="checkbox">
  <input id="item1" type="checkbox">
  <label for="item1">Item 1</label>
</div>
<div class="checkbox">
  <input id="item2" type="checkbox">
  <label for="item2">Item 2</label>
</div>
<div class="checkbox">
  <input id="item3" type="checkbox">
  <label for="item3">Item 3</label>
</div>

adding style to li elements if checkbox is checked

Though DCR's solution is good, it doesn't work if the input gets unchecked. Here's a little modification that i've made, hope it will solve the problem!

function changeOnChecked(){
 const a = event.target.closest('input').checked;
 if(a)
  event.target.closest('li').style.color='red'
 else
   event.target.closest('li').style.color='black'
}

<ul id = "to-do-list" >
            <li> <input type="checkbox" onclick="changeOnChecked()"> to school</li>
            <li> <input type="checkbox" onclick="changeOnChecked()"> do website</li>
        </ul>

How to align checkboxes for a to do list?

You are adding the checkbox after you add text to the element. a text block is also considered a node inside the element. So para.childNodes also gives you the text nodes. para.childnodes[0] is the added text from the input in your code.

By using para.insertBefore(checkBox, para.childNodes[0]); we can add the checkbox before the text node.

insertBefore allows you to insert an element before another. appendChild always adds (appends) to the end of the nodelist.

There are other ways of doing this too in the DOM.

function printInput() {  var toDoInput = document.getElementById("textbox").value;  var para = document.createElement("li");  para.innerText = toDoInput;  var checkBox = document.createElement("input");  checkBox.type = "checkbox";  checkBox.className = "cb";  //this line will insert the checkbox before the text node  para.insertBefore(checkBox, para.childNodes[0]);  document.getElementById("paragraph").appendChild(para);}
function enter() {  if (event.keyCode === 13) {    document.getElementById("enterButton ").click();  }}

.container {  border-style: dashed;  border-width: 4px;  display: flex;  flex-flow: column wrap;  align-items: center;  justify-content: center;  margin: auto;  width: 40%;  padding-bottom: 20%;}
li {  list-style-type: none;}
#paragraph {  width: 100%;  clear: both;  margin: 0;  padding: 8px 0 8px 10px;}
.container {  width: 500px;  clear: both;  display: table;}
li {  display: flex;  border-bottom: 1px solid #cfcbcc;}
h1 {  text-align: center;}

<h1> What will you do today? </h1><div class="container">  <input class="inputBox" id="textbox" type="text" onkeypress="enter()" placeholder="Bake a cake">  <input onclick="printInput()" class="inputBox" id="enterButton" type="button" value="Enter" id="enterButton">  <ul id=paragraph></ul></div>

CSS for displaying an indented ordered list with checkboxes before each list item

http://jsfiddle.net/9v97V/2/

You can do something like this. You put the input inside the list item, then absolute position it so it appears before the list item.

Most relevant CSS:

li input
{
    position: absolute;
    margin-left: -40px;
    margin-top: 5px;
}