Using the accent-color CSS property to style from elements

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

We can use the accent-color CSS to easily style form elements. The currently supported elements are radio buttons, checkboxes, and range input types.

For example, if we apply this CSS rule:

input {
  accent-color: orangered;
}

We will get the below output.
accent color form example

Until the introduction of the accent color, we needed to do CSS tricks like this one to style elements such as checkboxes.

Automatic accessibility build in the accent-color property

We have some accessibility features built in the way of how accent-color works. For example, if we change the accent color the color of the checkmark will be auto-updated to get a better contrast.
accent color accessibility features

For the moment I did not find any way to set the actual contrast color for items such as the check mark.

Using accent-color with CSS variables and color schemes

One cool thing we can do is to mix up the accent-color with a :root CSS variable.

:root {
  --ac: orangered;
}

input {
  accent-color: var(--ac);
}

And when we switch to a different color scheme we can just redefine the CSS variable for better contrast.

@media (prefers-color-scheme: dark) {
    :root {
        --ac: #4692ec;
    }
}

accent color and color schemes

You can check out there the full codepen for this example.

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X