How to Customize the Color Picker Input Box in Webkit?

Controlling the Color Picker Box in Webkit

Cross-compatibility polyfills for older browsers may introduce inconsistencies when styling input[type=color] elements in Webkit. Specifically, when setting the color and background color of the input to match, a grey box appears around the selected color.

WebKit-Specific CSS Selectors

To customize form controls like the color picker, Webkit offers specific CSS selectors. However, it's important to note that these selectors are not official and may be subject to breaking changes in future Webkit updates.

Therefore, it's recommended to avoid using them in production unless it's for personal projects.

Method 1: Hiding the Non-Colored Part

Using Webkit-specific selectors, it's possible to largely conceal the non-colored portion of the color picker 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;
}

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

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