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.

• Use ::-webkit-color-swatch-wrapper to remove any built-in padding.

• Style ::-webkit-color-swatch to have a 2px solid #ccc border and 4px border-radius.

• Use ::-moz-color-swatch to apply the same border and border-radius for Firefox.

• Add a 0.2s ease transition to border-color and transform on the swatch.

• On .custom-color:hover, increase the swatch border-color to #0066cc and scale it up slightly (scale(1.1)).

• On .custom-color:focus, remove the outline and apply a box-shadow like 0 0 0 3px rgba(0,102,204,0.3).

Goal

Write CSS rules so that the native color picker displays as a 32px × 32px swatch with custom border, rounded corners, smooth hover scaling, and a focus ring, without relying on JavaScript.

Constraints

• Use only CSS (no JavaScript).

• Remove all native padding and borders via appearance: none and vendor resets.

• Style both WebKit and Mozilla pseudo-elements to ensure consistent cross-browser control.

• Apply transitions on border-color and transform over 0.2s ease.

• Define focus styling via box-shadow instead of using outline.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.