<div class="wrapper">
<div class="cpanel">
<form>
<p>
<input type="reset">
<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><ul> 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><ul> 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><li> 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><li> 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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.