htmlcssborder-radiusinput-type-color

How do i style an HTML standard input-type-color element?

I am having trouble styling the default <input type="color"> element using CSS.

For reference, say i have the following elements and CSS styling:

#myColorPicker {
  border-radius: 50px;
}
<label for="myColorPicker">Select a color:</label>
<input type="color" name="myColorPicker" id="myColorPicker">

This changes the "outside"-rectangle's border-radius property only. Is there a way to also change the "inside"-rectangle's border-radius property? With "inside"-rectangle I mean the colored rectangle actually showing the color picked by the user.

It seems to be trickier than expected.

Thank you in advance!

Solution

  • Styling an input element of type "color" have limited styling options for the native color input due to its complex structure.

    You'll often need to create a custom color picker using JavaScript or an external library.

    To achieve styling on the "inside rectangle" i.e. the rectangle filled with the color you'll have to use the browser webkit selector ::-webkit-color-swatch

    and here is your new code

    #myColorPicker::-webkit-color-swatch {
  border-radius: 50px;
}
    <label for="myColorPicker">Select a color:</label>
<input type="color" name="myColorPicker" id="myColorPicker">