Last Updated: December 26, 2018
· midu

Mess with your users

You can have a bit of fun with filters and pseudo element selectors for all type of form elements. Today I propose to have fun with <input type="color">

/* */
::-webkit-color-swatch { 
  -webkit-filter: invert(100%);

::-webkit-color-swatch-wrapper {
   padding: 0;

Live demo (Chrome only)

Based on the article List of Pseudo-Elements to Style Form Controls.