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

This may work, except IE.

input[type=color]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  /*input[type=color] double the scale and clip the offset*/
  -webkit-transform: scale(2);
  transform: scale(2);
  -webkit-clip-path: inset(25%);
  clip-path: inset(25%);
}
  
input[type=color]:before{
  content: attr(value);
  text-shadow:.1em .1em #fff;
  font-size:.5em;
  width:50%;height:50%;
  left:25%;top:25%;
  text-align:center;
  position:absolute;
  background-image: url('data:image/gif;base64,R0lGODlhBgADAPABAICAgAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJFAABACwAAAAABgADAAACBkxggGfMBQAh+QQJFAABACwAAAAABgADAAACBQximHZbACH5BAUUAAEALAAAAAAGAAMAAAIFRGKXiVoAOw==');
  }