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

Question

WebKit has special CSS selectors you can use to customize form controls but they aren't official.
An update to WebKit in the future will probably break it.

Please don't use it for production!!

But feel free to play with it for personal projects :)

Method 1

Uses webkit-specific selectors to mostly hide the non-colored part of the input.

input[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 32px;
	height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}

<input type=color value="#ff0000">

Method 2

Hides the color input (opacity:0) and uses JavaScript to set the background of the wrapper to the input's value.

var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
	color_picker_wrapper.style.backgroundColor = color_picker.value;    
}
color_picker_wrapper.style.backgroundColor = color_picker.value;

input[type="color"] {
	opacity: 0;
	display: block;
	width: 32px;
	height: 32px;
	border: none;
}
#color-picker-wrapper {
	float: left;
}

<div id="color-picker-wrapper">
	<input type="color" value="#ff0000" id="color-picker">
</div>

A good workaround is to:

1. Wrap your color picker in a label.
2. Set the color picker's visibility to false.
3. Bind the label's background color to the value of the color picker.

Now, you have an easy to style label that when clicked, opens your color picker. As discussed in comments, clicking a label activates the color picker without any javascript; it's the default behaviour.

$(document).on('change', 'input[type=color]', function() {
  this.parentNode.style.backgroundColor = this.value;
});

input {
  visibility: hidden;
}

label {
  background-color: black;
  height: 32px;
  width: 32px;
  position: fixed;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>

JSFiddle: https://jsfiddle.net/9zhap7rb/3/

I am using a simple solution, but not so elegant, I guess. You can wrap the input with a div and make the input bigger than the container, after that you can shape the container as you want. You can also use a label with a for attribute to create a clickable button with some text.

I have made an example:

.input-color-container {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: solid 2px #ddd;
  border-radius: 40px;
}

.input-color {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}

.input-color-label {
  cursor: pointer;
  text-decoration: underline;
  color: #3498db;
}

<div class="input-color-container">
  <input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
  I am a clickable label, try me
</label>

This is how I did it for a art project recently. I am a newbie, so let me know if I did this horribly wrong.

input[type=color]{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 40px;
	background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: solid 1px #000; /*change color of the swatch border here*/
	border-radius: 40px;
}

<input type="color" value="#C899F5">

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 <input type=color> 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 */
}

<label class="color-picker">
    <span>
        <input type=color value="#ff00ff">
    </span>
</label>

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: 150%;
  height: 150%;
  margin: -25%;
}

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

<div class="cp_wrapper">
  <input type="color" name="cp_1" value="#ff8888" />
</div>
<div class="cp_wrapper">
  <input type="color" name="cp_2" value="#88ff88" />
</div>
<div class="cp_wrapper">
  <input type="color" name="cp_3" value="#8888ff" />
</div>