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

I think this solution is best than Keishi Hattori which is currently the chosen one. Keishi Hattori's solution leaves a dull color around the selected color and requires to set a width/height and does not work well if you add a border.

I found the following solution to work better.

input[type="color"] {
  -webkit-appearance: none;
  position:relative;
}
input[type="color"]::-webkit-color-swatch {
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  box-sizing: border-box;
  border:1px solid transparent;
}

You can add a border if you want.

input[type="color"].withborder {
  -webkit-appearance: none;
  position:relative;
  border:1px solid #000;
}

input[type="color"].withborder::-webkit-color-swatch {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  box-sizing: border-box;
  border:1px solid transparent;
}

You can add a background in input[type="color"] if you want. You'll need to change the 0px in the ::-webkit-color-swatch.

input[type="color"].withborder {
  -webkit-appearance: none;
  position:relative;
  border:1px solid #000;
  background:#bbb;

}

input[type="color"].withborder::-webkit-color-swatch {
  position:absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom:4px;
  box-sizing: border-box;
  border:0px solid transparent;
}