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
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

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!