Webkit CSS to control the box around the color in an input[type=color]?

Question

Is there a Webkit-specific CSS style that will allow me to control the color/size/style of the box around the color in an input[type=color]?

I\'m setting

Answer 1

Building upon the approach from @Henrique Rotava, we can leverage the hidden overflow and negative margins to create a more flexible wrapper with less CSS markup. Basically the picker becomes big enough and stretches out enough that only the middle shows up when the wrapper clips it.

The wrapper must declare a width and height, which should be fine for most use cases where you want to style the wrapper, not the input. Otherwise the element will not be visible. All other formatting is optional for the wrapper.

input[type='color'] {
  padding: 0;
  width: 140%;
  height: 140%;
  margin: -20%;
}

.cp_wrapper {
  overflow: hidden;
  width: 2em;
  height: 2em;
  /* optional formatting below here */
  border-radius: 50%;
  box-shadow: 1px 1px 3px 0px grey;
  margin: 1em;
}