<fildset>
  <input type="checkbox" />
  <input type="checkbox" disabled />
  <input type="checkbox" checked />
  <input type="checkbox" checked disabled />
</fildset>

<fildset>
  <input type="radio" />
  <input type="radio" disabled />
  <input type="radio" checked />
  <input type="radio" checked disabled />
</fildset>

<progress max="100" value="0"> 0% </progress>
<progress max="100" value="5"> 5% </progress>
<progress max="100" value="50"> 50% </progress>
<progress max="100" value="95"> 95% </progress>
<progress max="100" value="100"> 100% </progress>
<input type="range" />
<input type="range" disabled />
<input type="range" list="tickmarks1" />
<datalist id="tickmarks1">
  <option value="0"> </option>
  <option value="10"> </option>
  <option value="20"> </option>
  <option value="30"> </option>
  <option value="40"> </option>
  <option value="50"> </option>
  <option value="60"> </option>
  <option value="70"> </option>
  <option value="80"> </option>
  <option value="90"> </option>
  <option value="100"> </option>
</datalist>
<input type="text" list="animals" placeholder="Animals">
<input type="search" list="animals" placeholder="Search...">
<datalist id="animals">
  <option>Dog</option>
  <option>Cat</option>
  <option>Spider</option>
</datalist>
<input type="button" value="Button" />
<input type="button" value="Button" disabled />
<input type="text" value="value" />
<input type="text" value="value" disabled />
<input type="password" value="value" />
<input type="password" value="value" disabled />
<input type="number" value="42" />
<input type="number" value="42" disabled />
<textarea>value</textarea>
<textarea disabled>value</textarea>
<select>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select multiple>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select multiple disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<meter min="0" max="100" low="33" high="66" optimum="80" value="20"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="66"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>
<input type="color" />
<input type="color" list="colorslist" />
<datalist id="colorslist">
  <option value="#00ffff" />
  <option value="#ff00ff" />
  <option value="#ffff00" />
  <option value="#ffaa00" />
</datalist>
<input type="date" />
<input type="week" />
<input type="month" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" />
<input type="email" />
<input type="text" list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>
<input type="file" value="value" />
<input type="file" value="value" disabled />
<input type="search" value="value" />
<input type="search" value="value" disabled />
<input type="hidden" />
<input type="image" src="https://www.w3cplus.com/sites/default/files/blogs/2021/2108/all.svg" value="全部" />
<input type="reset" />
<input type="tel" />
<input type="url" />

<ul>
  <li>list</li>
  <li>list</li>
</ul>

<p>You may be wondering how to tint more than these four form elements? Here's a minimal sandbox which tints.</p>

<div class="form">
  <label for="accent-color">accent-color:</label>
  <input type="color" id="accent-color" value="#ff69b4" name="accent-color" />
</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: 100%;
  min-block-size: 100%;
  font-family: "Exo", system-ui, sans-serif;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
  padding: 40px;
}

:root {
  color-scheme: light dark;
  --color-accent: hotpink;
}

html {
  scrollbar-color: hotpink Canvas;
}

:root {
  accent-color: var(--color-accent);
}

:focus-visible {
  outline-color: var(--color-accent);
}

::selection {
  background-color: var(--color-accent);
}

::marker {
  color: var(--color-accent);
}

:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
  color: var(--color-accent);
}

.form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / 0.8);
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
}

#accent-color {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

#accent-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

#accent-color::-webkit-color-swatch {
  border: none 0;
}

const rootElement = document.documentElement;
const accentColorPick = document.getElementById("accent-color");

accentColorPick.addEventListener("change", (etv) => {
  rootElement.style.setProperty("--color-accent", etv.target.value);
});