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

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

<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>
<input type="text" list="animals" placeholder="Animals">
<input type="search" list="animals" placeholder="Search...">
<datalist id="animals">
<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 disabled>value</textarea>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
<select disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
<select multiple>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
<select multiple disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
<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" />
<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>
<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" />


<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" />
@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);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.