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

Incredible Demos

  • By
    Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

  • By
    jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

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!