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

Another method, not mentioned here, uses custom-property (variable) set on the input element itself, and controlled by an onInput event handler directly on the element. Since CSS attr is currently unit-less, there is no choice but create a variable of type color and use it.

It's a bit of a hassle but the HTML is still single-element.

input[type=color]{
  --size: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  width: 0;
  height: 0;
  background: white;
  margin: calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
}
  
input[type=color]::before{
  content: '';
  display: block;
  background: var(--value);
  text-transform: uppercase;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size)/2) 0 0 calc(var(--size)/2);
  border: 2px black;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  cursor: pointer;
}

<input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" />

---

OCT 2020: New attr() type syntax (not yet finilized)

There is a very cool new feature coming to CSS which helps a lot in this situation, as it makes it possible to access the dynamic value property of an input and use it in a pseudo-element. Apparently type="color" allows pseudo-elements.

As of writing this, no browser has support for this feature which allows specifying type within attr() so effectively attr could be used as background for the input's psuedo-element, allowing complete customization:

input[type=color]{
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  width: 0;
  height: 0;
  margin: -100px 0 0 -100px;
}
  
input[type=color]::before{
  content: '';
  display: block;
  background: white;
  background: attr(value color, white);
  width: 200px;
  height: 200px;
  margin: 100px 0 0 100px;
  border: 2px black;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

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

Answer 2

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">

Answer 3

My method:

<div class="user__colors">
    <label><input type="color"/></label>
</div>

input {
    background-color: transparent;
    border: none;
    position: relative;
    width: 80px;
    height: 12px;
    &:after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: url(../img/color-palette.jpg) repeat-y 0 0;
        background-size: contain;
        top: 0;
        border-radius: 3px;
    }
}

And it view like this: http://prntscr.com/gloozc

But if you press Ctl+F5, you`ll see original input for a moment.

Answer 4

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>

Answer 5

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;
}

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

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;
}

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

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;
}

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