<div class="container">
  <ul>
    <li>Friday</li>
    <li>Monday</li>
    <li>Saturday</li>
    <li>Wednesday</li>
  </ul>
  <ol>
    <li>Friday</li>
    <li>Monday</li>
    <li>Saturday</li>
    <li>Wednesday</li>
  </ol>
  <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 class="form">
  <label for="list-style-type">list-style-type:</label>
  <select name="list-style-type" id="list-style-type">
    <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>

@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: 40px;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
  line-height: 2;
}

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

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

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

.list__item {
  display: list-item;
}

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

const rootEle = document.documentElement;
const select = document.getElementById("list-style-type");

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