How to Change HTML5 Color Input Inner Radius

There's no good cross-browser way of doing this; browsers just don't expose the necessary hooks, except Chrome (and maybe Safari and other WebKit-based browsers). Firefox has some support, outlined here.

The following will work in Chrome 55. It was compiled from a number of sources, most notably from Keishi Hattori's answer

#color1 {
  -webkit-appearance: none;
  padding: 0;
  border: none;
  border-radius: 10px;
  width: 20px;
  height: 20px;
}
#color1::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
  padding: 0;
}
#color1::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: 10px;
  padding: 0;
}
<input type="color" id="color1" />


  1. Wrap the input in a div.
  2. Add border-radius and overflow property to the div.

That seems to be enough for Firefox.. For Chrome:

  1. Add width and height 200% to the input
  2. Reposition the input using transform

div {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}

[type="color"] {
  border: 0;
  padding: 0;
  width: 200%;
  height: 200%;
  cursor: pointer;
  transform: translate(-25%, -25%)
}
<div>
  <input type="color">
</div>

Tags:

Javascript

Html

Css

Recent Posts