CSS accent-color property

Today I learned that browsers now support an accent-color property on some form inputs for customizing their color. This is especially nice for checkboxes and radio buttons because now I no longer need any workarounds I’ve used in the past to make a decent-looking checkbox. It will also ensure that it’s accessible by automatically adjusting the color of the check to an appropriate contrast:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<input type="checkbox" class="yellow" checked />
<input type="checkbox" class="purple" checked />

<style>
input {
  display: block;
  width: 30px;
  height: 30px;
}

input.purple {
  accent-color: rebeccapurple;
}

input.yellow {
  accent-color: yellow;
}
</style>