Create a customized task list using the CSS stylesheet

[jorge-campo]

In addition to the numbered lists and bullet lists, we want to include a "checkbox" list for articles where the user must complete a list of actions.

With simple Markdown, it's possible to create this list using - [x]. In addition to this, we want to customize the list look-and-feel using CSS.

[jorge-campo]

From ChatGPT

To render this checkbox list in your HTML file using your custom stylesheet, you will need to include a new style rule in your stylesheet. Here's an example:

ul.checkbox-list {
  list-style-type: none;
}

ul.checkbox-list li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

ul.checkbox-list li:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 2px;
}

ul.checkbox-list li input[type="checkbox"] {
  display: none;
}

ul.checkbox-list li input[type="checkbox"]:checked + label:before {
  content: "\2713";
  font-size: 16px;
  color: #4CAF50;
  text-align: center;
  line-height: 20px;
}

This style rule will apply to a <ul> element with the class name checkbox-list. It will remove the default list-style-type and add a custom bullet style using CSS pseudo-elements. It will also hide the default checkboxes and replace them with custom checkboxes that use a checkmark symbol when checked.

To use this style rule in your HTML file, you will need to add the class attribute to your <ul> element like this:

<ul class="checkbox-list">
  <li><input type="checkbox" id="task1"><label for="task1">Task 1</label></li>
  <li><input type="checkbox" id="task2" checked><label for="task2">Task 2</label></li>
  <li><input type="checkbox" id="task3"><label for="task3">Task 3</label></li>
</ul>

In this example, each list item contains an <input> element with the type attribute set to "checkbox", a unique id attribute, and a corresponding <label> element with the for attribute set to the same id value. The label text is used to describe each task. When the checkbox is checked, the corresponding label will display the checkmark symbol using the CSS pseudo-element defined in the stylesheet.

You can add the class attribute to the <ul> element in the Markdown file or in the HTML file, depending on how you are generating your static site.

If you are writing the Markdown file directly, you can add the class attribute to the Markdown syntax for the list, like this:

{: .checkbox-list}
- [ ] Task 1
- [x] Task 2
- [ ] Task 3

In this example, the {:.checkbox-list} syntax is a Markdown attribute that adds the class attribute to the <ul> element when the Markdown is converted to HTML.

If you are generating your HTML file from a template, you can add the class attribute to the HTML syntax for the list, like this:

<ul class="checkbox-list">
  <li><input type="checkbox" id="task1"><label for="task1">Task 1</label></li>
  <li><input type="checkbox" id="task2" checked><label for="task2">Task 2</label></li>
  <li><input type="checkbox" id="task3"><label for="task3">Task 3</label></li>
</ul>

In this example, the class attribute is added directly to the <ul> element in the HTML syntax. This is a common approach when generating static sites from templates.