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

Unfortunately, color inputs are quite finicky. Different browsers treat them differently. For example, Chrome will size the input based on width/height + border-width. Firefox, on the other hand, will use the maximum of width/height and border-width. This makes equal spacing quite difficult, with by itself.

However, what we can do is remove everything except for the picked color itself, and throw a wrapper around it that will be able to more predictably handle the spacing around the input.

label.color-picker {
  width: 150px; /* Width of color picker */
  border: 1px solid #ccc; /* Outer border */
  border-radius: 3px; /* Border radius of outer border */
  padding: 5px; /* Space between outer border and color picker */
  background: #fff; /* Color between outer border and color picker */

  display: block; /* Contain color picker within label */
}

label.color-picker > span {
  border: 1px solid #ccc; /* Border around color in color picker */

  display: block; /* Contain color picker within span */
}

label.color-picker > span > input[type=color] {
  height: 10px; /* Height of color picker */

  display: block; /* Avoids space above/below color picker */
  width: 100%; /* Fill available horizontal space */
  border: none; /* Remove browser's border */
  padding: 0px; /* Remove space around color picker in Chrome */
}

/* Chrome styles */
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0; /* Remove browser's padding around color picker */
}
label.color-picker > span > input[type=color]::-webkit-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}

/* Firefox styles */
label.color-picker > span > input[type=color]::-moz-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}
label.color-picker > span > input[type=color]::-moz-focus-inner {
  border: none; /* Remove browser's padding around color in color picker */
  padding: 0; /* Remove browser's padding around color in color picker */
}