<div class="default">
  <h2>Default</h2>
  <div>
    <label><input type="checkbox" checked="checked" /> Checkbox</label>
    <label><input type="radio" checked="checked" /> Radio</label>
  </div>
  <div>
    <label><input type="range" min="0" max="10" value="5"></label>
  </div>
</div>
<div class="accent">
  <h2>With Accent</h2>
  <div>
    <label><input type="checkbox" checked="checked" /> Checkbox</label>
    <label><input type="radio" checked="checked" /> Radio</label>
  </div>
  <div>
    <label><input type="range" min="0" max="10" value="5"></label>
  </div>
</div>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h2 {
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 0;
  padding-bottom: 8px;
}

input {
  accent-color: var(--accent-color);
  font-family: inherit;
}

.default,
.accent {
  padding: 20px;
  border-radius: 10px;
}

.accent {
  --accent-color: #7e0048;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.