<div class="container">
  <div class="box">
    <ul>
      <li>Friday</li>
      <li>Monday</li>
      <li>Saturday</li>
      <li>Wednesday</li>
    </ul>
  </div>
  <div class="box">
    <ol>
      <li>Friday</li>
      <li>Monday</li>
      <li>Saturday</li>
      <li>Wednesday</li>
    </ol>
  </div>
  <div class="box">
    <div class="lists">
      <div class="list__item">Friday</div>
      <div class="list__item">Monday</div>
      <div class="list__item">Saturday</div>
      <div class="list__item">Wednesday</div>
    </div>
  </div>
</div>

<div class="form">
  <label for="list-style-type">list-style-type:</label>
  <select name="list-style-type" id="list-style-type">
    <optgroup label="none">
      <option value="none">none</option>
    </optgroup>
    <optgroup label="Emoji">
      <option value="'🐻'">🐻</option>
      <option value="'🍔'">🍔</option>
      <option value="'❤️'">❤️</option>
      <option value="'🥰'">🥰</option>
      <option value="'🍓'">🍓</option>
      <option value="'🔥'">🔥</option>
      <option value="'👍'">👍</option>
      <option value="'🪔'">🪔</option>
      <option value="'🍂'">🍂</option>
    </optgroup>
    <optgroup label="Unicode symbols">
      <option value="'🜫'">🜫</option>
      <option value="'🜲'">🜲</option>
      <option value="'➤'">➤</option>
      <option value="'☄'">☄</option>
      <option value="'⇪'">⇪</option>
      <option value="'♠'">♠</option>
      <option value="'◉'">◉</option>
      <option value="'☑'">☑</option>
      <option value="'✤'">✤</option>
      <option value="'❦'">❦</option>
    </optgroup>
    <optgroup label="Text">
      <option value="'Note:'">Note:</option>
      <option value="'Go:'">Go:</option>
    </optgroup>
    <optgroup label="Numeric">
      <option value="decimal">decimal</option>
      <option value="decimal-leading-zero">decimal-leading-zero</option>
      <option value="arabic-indic">arabic-indic</option>
      <option value="armenian">armenian</option>
      <option value="upper-armenian">upper-armenian</option>
      <option value="lower-armenian">lower-armenian</option>
      <option value="bengali">bengali</option>
      <option value="cambodian">cambodian</option>
      <option value="khmer">khmer</option>
      <option value="cjk-decimal">cjk-decimal</option>
      <option value="devanagari">devanagari</option>
      <option value="georgian">georgian</option>
      <option value="gujarati">gujarati</option>
      <option value="gurmukhi">gurmukhi</option>
      <option value="hebrew">hebrew</option>
      <option value="kannada">kannada</option>
      <option value="lao">lao</option>
      <option value="malayalam">malayalam</option>
      <option value="mongolian">mongolian</option>
      <option value="myanmar">myanmar</option>
      <option value="oriya">oriya</option>
      <option value="persian">persian</option>
      <option value="lower-roman">lower-roman</option>
      <option value="upper-roman">upper-roman</option>
      <option value="tamil">tamil</option>
      <option value="telugu">telugu</option>
      <option value="thai">thai</option>
      <option value="tibetan">tibetan</option>
    </optgroup>
    <optgroup label="Alphabetic">
      <option value="lower-alpha">lower-alpha</option>
      <option value="lower-latin">lower-latin</option>
      <option value="upper-alpha">upper-alpha</option>
      <option value="upper-latin">upper-latin</option>
      <option value="lower-greek">lower-greek</option>
      <option value="hiragana">hiragana</option>
      <option value="hiragana-iroha">hiragana-iroha</option>
      <option value="katakana">katakana</option>
      <option value="katakana-iroha">katakana-iroha</option>
    </optgroup>
    <optgroup label="Symbolic">
      <option value="disc">disc</option>
      <option value="circle">circle</option>
      <option value="square">square</option>
      <option value="disclosure-open">disclosure-open</option>
      <option value="disclosure-closed">disclosure-closed</option>
    </optgroup>
    <optgroup label="Fixed">
      <option value="cjk-earthly-branch">cjk-earthly-branch</option>
      <option value="cjk-heavenly-stem">cjk-heavenly-stem</option>
    </optgroup>
  </select>
</div>

<div class="form">
  <span>list-style-position:</span>
  <label for="outside">
    <input type="radio" id="outside" value="outside" name="list-style-position" checked>
    outside
  </label>
  <label for="inside">
    <input type="radio" id="inside" value="inside" name="list-style-position">
    inside
  </label>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  inline-size: 100vw;
  min-block-size: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
  line-height: 2;
}

.form {
  display: flex;
  align-items: center;
  gap: 10px;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.box {
  padding: 20px 40px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

ul,
ol,
.lists {
  border-inline-start: 2px solid #f35;
}

.list__item {
  display: list-item;
}

li,
.list__item {
  list-style-type: var(--list-style-type, disc);
  list-style-position: var(--list-style-position, outside);
}

const rootEle = document.documentElement;
const select = document.getElementById("list-style-type");
let inputs = document.querySelectorAll('input[type="radio"]');

select.addEventListener("change", (etv) => {
  rootEle.style.setProperty("--list-style-type", etv.target.value);
});

inputs.forEach((input, index) => {
  input.addEventListener("click", (etv) => {
    rootEle.style.setProperty(`--${etv.target.name}`, etv.target.value);
  });
});