Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Color Picker Control with Styled Swatch

Solution: Custom Color Picker Control with Styled Swatch

Let’s create a custom color picker by styling the color swatch, removing native appearance, and adding interactive hover and focus effects using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a <label> with class color-picker that wraps an <input type="color" class="custom-color"> and the text Choose color, write CSS to:

  • Remove the default appearance of the color input across browsers.

  • Set the .custom-color size to 32px by 32px, remove padding and border, and apply cursor: pointer. ...