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 the color and background color of the input already so it looks good with a cross-compatibility polyfill I'm using for older Chrome and Firefox.

Now that Chrome actually has a color picker, there's a box around the color which leaves a 1px grey box floating in the middle of the input when both color and background color of the input are set to the same color.

Is there some CSS to get rid of it, either by setting that box's width to 0, changing the style to none, or, at worst, setting the color to the same as the color and background color?

---

In this image, I'm talking about the grey box around the white area and outside the green:

I've found one workaround, which is to set a high enough padding that the box (the grey border and green contents) is squished to size 0. But that's really hacky, and doesn't look very good over in Firefox.

Solution 1

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>

Solution 2

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/

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

Solution 4

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

Solution 5

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>

View more solutions

Comments

[BrianFreud]

Wow, they make those hard to find. Thanks :D

[Frank]

I just did the same thing for a "file" input element. It works very well. I set its width and height to 0 and set overflow to hidden, then just style the label however I like.

[Aebsubis]

Method 2 works properly on Chrome, Firefox, and Opera.

[Luke Madhanga]

@Frank I may have misunderstood you, but if you are then using JS to click on the file input, this will not work in IE as this is seen as a security risk. You may not be but just a headsup for someone else

[Arnaud]

FYI the equivalent pseudo element for Firefox is -moz-color-swatch (there is no color-swatch-wrapper pseudo element on Firefox thouhg)

[Coderer]

Luke, look at the fiddle -- it's not JS based. Per the spec, if you put an input in a label then a click on the label triggers the input. This is the same way you'd make an entire checkbox toggleable by clicking the label.

[JoJo]

This was very helpful, works great in Edge, Chrome, Firefox - thanks

[Antony Jones]

In case anybody decides to use this in 2020, 5 years later, it won't work in Safari iOS, because Safari iOS doesn't suport colour inputs.

[vsync]

Good like with IE/Opera/Safari/Edge

[Coderer]

Method one still works on modern Chrome in 2020, with one crazy caveat -- you have to declare the rule by itself, i.e. no combining the -webkit and -moz prefixes in a single rule.

[greyoxide]

This is a clean CSS only solution, nice work.

[Ancel Designs]

Used this today, and just wanted to add Method 1 combined with input[type="color"]:focus { outline: none !important; border: 0px; box-shadow: 0; } makes it look like Method 2 without the js, by eliminating the focus border.

[Partack]

quick and painless without adding another html element. I went with this one. thanks!