CSS accent-color
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!
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Save Web Form Content Using Control + S]()
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...
![Parallax Sound Waves Animating on Scroll]()
Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...
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