How to Customize the Webkit Input[type=color] Color Picker Box?

Customizing Webkit Input[type=color] Color Picker Box

With the introduction of a color picker in Chrome, users have encountered a grey box issue when setting both the color and background color of the input to the same value. To address this, Webkit provides specific CSS selectors to customize form controls.

Note: These selectors are not official and may break in future Webkit updates. Use them cautiously for personal projects only.

Method 1: Hiding Non-Colored Part

This method utilizes webkit-specific selectors to hide the non-colored portion of the input:

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

This ensures that the input background color fully covers the color picker box.

Example HTML:

<input type=color value="#ff0000">

The above is the detailed content of How to Customize the Webkit Input[type=color] Color Picker Box?. For more information, please follow other related articles on the PHP Chinese website!