This code snippet will add your brand color to forms.

Forms are a convenient built-in means to get feedback from people on the internet, but they may not have the look you want for branding purposes. Replacing them with a custom option is harder than it may seem in part because forms are designed to be accessible.

Accessibility on the internet is very important. People with handicaps benefit greatly from being able to do things easily from home while at the same time are frequently frustrated with web elements that don't work for them.

One line of CSS code can let you add an accent color to forms so you can have your cake and eat it too.

The CSS code that you will need is "accent-color" followed by naming the color of your choice. It looks like this:

{accent-color: hotpink;}

Using the CSS "accent-color" from the CSS UI specification will let you use existing forms with built-in accessibility while giving a little customization. Be aware that light themes and dark themes will be handled slightly different by the code and that different browsers will implement it differently.

The reason for this is accessibility. The exact color used needs to remain in a range that will contrast sufficiently with the light or dark background to still be visible even to people with poor eyesight.

While you should look at the result before deciding whether or not to publish it, it's best to trust the browser. Trying too hard to force it to accept a particular shade may undermine accessibility.

For now, this line of CSS only changes the color of these four following elements of the form:

Checkbox Radio buttons Range slider Progress element

However, this may change in the future. The spec does not explicitly limit accent-color to these four elements. Support for other elements may be added at some point.

Currently, this code is supported by by Chromium 93+ and Firefox 92+. These browsers use different algorithms for determining the custom color shade. You can find examples online of this code in use on sites such as glitch.me. For more information click here https://web.dev/accent-color/.