CSS accent-color

By  on  

For better or worse, form fields have been somewhat difficult to style with CSS. Form control display is dependent upon device, operating system, and browser, so you can imagine the difficulty in making styling easy. We have slowly been given some controls over form control display, as evidenced by accent-color!

The accent-color CSS property allows us to change the accent of input, input[type=radio], and input[type=checkbox] elements!

input {
  accent-color: blue;
}

input[type=checkbox] {
  accent-color: red;
}

See the Pen by David Walsh (@darkwing) on CodePen.

accent-color is a lovely addition to input CSS elements. I love any CSS feature that encourages using native elements instead of shimming your own to improve branding and design. Let's hope for more CSS features like accent-color!

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Introducing MooTools Dotter

    It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

Discussion

  1. Andrejs Garbuzovs

    The accent-color CSS property allows us to change the accent of input ….. JUST IN CHROME!
    In Safari, FF, – its not working
    Check this before: https://caniuse.com/?search=accent-color

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!