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

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>

Answer 2

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==');
  }

<input type="color" value="#ff0000" />
<input type="color" value="#00ff00" />
<input type="color" value="#0000ff" />

Answer 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 #ffffd;
  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>

Answer 4

Here is the nice little color input design, you can disable the default frame by -webkit-appearance: none and then give the desired styles. Hop this helps :)

input[type="color"] {
   -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

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

Answer 5

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: 140%;
  height: 140%;
  margin: -20%;
}

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

Answer 6

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/