February 13, 2022

Using brand colors on forms with accent-color

Styling form elements is not an easy task. For <input type="text"> it can be done in a straightforward and simple way, but for other types it gets more complicated.

Let's see for the <progress> element:

progress {
  appearance: none; /* For Safari */
  border: none; /* For Firefox */
  color: blue; /* Fallback to a solid color */
}

With the new CSS property accent-color we just need to do:

progress {
	accent-color: blue;
}

And now we have the color applied quickly.

accent-color

According to the official documentation, "The accent-color CSS property sets the accent color for user interface controls generated by some elements."

Brand colors

All companies have their brand colors that we should use in the web or mobile interface we use. accent-color becomes very useful and you can change the color of all UI controls globally in your application using the :root pseudo class.

:root {
	accent-color: blue;
}

This will change the accent color on all elements of the page. The result would be:

Showing the difference of forms input with and and without accent colors. Checkbox, radio button, range and progress bar, first set is gray (browser default) and the other is blue, custom accent color set with css

And how is the support in the browsers?

The accent-color property is supported in all modern browsers and globally has 70% support, take this into account when you are going to use it.

Showing accent-color support from caniuse.com. IE is not supported, Edge from version 93, Firefox from version 92, Chrome from version 93, Safari 15.4 Technical Preview, Opera from 93 and Safari iOS from 15.4

Conclusion

You already know the accent-color property thanks to it you will be able to apply the brand colors of your client or company easier to all your web applications.