<div class="wrapper">
  <div class="cpanel">
    <form>
      <p>
        <input type="reset">
        &nbsp;&nbsp;
        <label>
          <input type="checkbox" checked data-s="ul" data-p="outline" data-on="255, 20, 147" data-off="255, 255, 255">
          show pink outline
        </label>
      </p>
      <hr>
      <p>
        <label>
          <code>&lt;ul&gt; margin-left</code>
          <input type="range" min=0 max=80 value=0 data-s="ul" data-p="margin-left" data-u="px">
        </label>
        <code class="value"></code>
      </p>
      <p>
        <label>
          <code>&lt;ul&gt; padding-left</code>
          <input type="range" min=0 max=80 value=40 data-s="ul" data-p="padding-left" data-u="px">
        </label>
        <code class="value"></code>
      </p>
      <p>
        <label>
          <code>&lt;li&gt; margin-left</code>
          <input type="range" min=0 max=80 value=0 data-s="li" data-p="margin-left" data-u="px">
        </label>
        <code class="value"></code>
      </p>
      <p>
        <label>
          <code>&lt;li&gt; padding-left</code>
          <input type="range" min=0 max=80 value=0 data-s="li" data-p="padding-left" data-u="px">
        </label>
        <code class="value"></code>
      </p>
      <p>
        <label>
          <input type="checkbox" data-s="ul" data-p="position" data-on="inside" data-off="outside"> <code>list-style-position: inside</code>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" data-s="ul" data-p="type" data-on="'•'" data-off="revert"> <code>list-style-type: "•"</code>
        </label>
      </p>
      <fieldset disabled>
        <legend>
          <label>
            <input type="checkbox"> style the marker
          </label>
        </legend>
        <p>
          <label>
            <code>font-size</code>
            <input type="range" min=16 max=64 value=20 data-s="marker" data-p="font-size" data-u="px">
          </label>
          <code class="value"></code>
        </p>
        <p>
          <label>
            <code>line-height</code>
            <input type="range" min=0 max=5 value=1 step="0.1" data-s="marker" data-p="line-height" data-u="">
          </label>
          <code class="value"></code>
        </p>
        <p>
          <label>
            <code>font-family</code>
            <select data-s="marker" data-p="font-family" data-u="">
              <option value="">(not set)</option>
              <option>sans-serif</option>
              <option>serif</option>
              <option>monospace</option>
              <option>cursive</option>
              <option>fantasy</option>
              <option>Arial</option>
              <option>Times New Roman</option>
              <option>Courier New</option>
              <option>Verdana</option>
              <option>Georgia</option>
              <option>Palatino</option>
              <option>Garamond</option>
              <option>Trebuchet MS</option>
              <option>Tahoma</option>
              <option>Arial Black</option>
              <option>Impact</option>
            </select>
          </label>
        </p>
      </fieldset>
    </form>
  </div>

  <div class="demo">
    <p>Lorem ipsum<span hidden> dolor sit amet, consectetur adipisicing elit. Eveniet ad accusantium dolorum dolor dolores! Qui</span>.</p>
    <ul>
      <li>List item</li>
    </ul>
    <p>Lorem ipsum<span hidden> dolor sit amet, consectetur adipisicing elit. Nemo ab a repellendus voluptatem ea facere</span>.</p>
    <p class="tip">Tip: Use the Reset button liberally to reset all controls to their initial values.</p>
  </div>      
</div>

html {
  --spacing: .3em;
}

body {
  font-family: sans-serif;
  font-size: 1.25rem;
  margin: 0;
}

.wrapper {
  display: grid;
  gap: var(--spacing);
  padding: var(--spacing);
}

label {
  user-select: none;
}

code {
  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
  font-size: 0.9rem;
}

.cpanel {
  font-size: 80%;
}

.cpanel p {
  margin: .5ch 1ch;
}

fieldset {
  padding: .5ch 0;
}

legend {
  margin-left: 1em;
}

.cpanel fieldset p {
  margin: .5ch;
}

.cpanel input[type=range] {
  vertical-align: middle;
  max-width: 33vw;
}

.cpanel label > code:first-child {
  display: inline-block;
  width: 11em;
}

.cpanel hr {
  border-color: #eee;
}

.cpanel input {
  font-size: inherit;
}

.value:empty + button {
  display: none;
}

.demo {
  color: #333;
  border: 2px groove #eee;
  padding-inline: 1em;
}

demo ul, li {
  transition: outline 50ms;
}

ul {
  font-size: var(--ul-font-size, revert);
  outline: 1.5px solid rgb(var(--ul-outline));
  margin-left: var(--ul-margin-left, revert);
  padding-left: var(--ul-padding-left, revert);
  list-style-position: var(--ul-position);
  list-style-type: var(--ul-type);
}

li {
  background: rgba(var(--ul-outline), 0.25);
  margin-left: var(--li-margin-left, revert);
  padding-left: var(--li-padding-left, revert);
  white-space: nowrap;
}

li::marker {
  font-family: var(--marker-font-family, revert);
  font-size: var(--marker-font-size, revert);
  line-height: var(--marker-line-height, revert);
}

.tip {
  display: none; /* only show at wide widths */
  background-color: #00f1;
  font-size: 85%;
  padding: 1ch;
}

@media (min-width: 917px) {
  html {
    --spacing: .9em;  
  }
  .wrapper {
    grid-template-columns: 430px 430px;
    overflow-x: auto;
  }

  .demo span[hidden] {
    display: inline;
  }
  
  .tip {
    display: block;
  }
}

let form = document.querySelector('form');

// set custom property on html element
let set = (prop, val) => {
  document.documentElement.style.setProperty(`--${prop}`, val);
};

// invoked after resetting the form and toggling the fieldset
// updates all custom properties to the current form element values
let update = () => {
  // only form elements with data attributes are handled
  let elems = [...form.elements].filter(elem => elem.matches(':not(fieldset, [type=reset], legend [type=checkbox])'));
  for (let elem of elems) {
    handle({ target: elem });
  }      
};

let handle = ({ target: elem }) => {
  // handle fieldset toggling first and return early
  if (elem.matches('legend [type=checkbox]')) {
    elem.closest('fieldset').disabled = !elem.checked;
    update();
    return;
  }

  let prop = `${elem.dataset['s']}-${elem.dataset['p']}`;

  let value = elem.type === 'checkbox'
  ? (elem.checked ? elem.dataset['on'] : elem.dataset['off'])
  : `${elem.value}${elem.dataset['u']}`;

  let disabled = elem.closest('fieldset[disabled]') !== null;

  set(prop, !disabled ? value : 'revert');

  if (elem.type === 'range') {
    elem.closest('p').querySelector('.value').textContent = value;
  }
};

form.addEventListener('input', handle);
form.addEventListener('reset', () => {
  // after form is reset, set fieldset to disabled
  // setTimeout is needed to be able to read the newly resetted form field values 
  setTimeout(() => {
    handle({ target: form.querySelector('legend [type=checkbox]') });
  }, 0);
});

form.reset();