How to Change HTML5 Color Input Inner Radius

Question

Trying to make the native HTML5 color input into a simple round circle, seems like the border and padding can be manipulated which is a good thing, I am looking for a way to border-radius the inner color...

#color1{
  padding:10px;
  border:none;
  border-radius:10px;
}

#color2{
  background:none;
  border:none;
}

<input type="color" id="color1" />
<input type="color" id="color2" />

Are you just looking for `border: 10px solid [color];`? That gives the colour as the border, but creates a middle 'layer'. — Obsidian Age, Jan 26 '17 at 23:05
I was looking for a way to change the inner border of the input element... — , Jan 27 '17 at 08:42

score 20 · Accepted Answer · edited May 23 '17 at 12:02

20

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

edited May 23 '17 at 12:02

Community

1
1

answered Jan 26 '17 at 23:22

Heretic Monkey

11,687
7
53
122

your solution is a nice one, but for better compatibility, check the snippet in my answer. – Siavas Jan 26 '17 at 23:59
this solution is the cleanest one, I'll put it in mind for hopefully the near future when compatibility is better. – Jan 27 '17 at 08:45

sol · Answer 2 · 2019-06-29T01:19:28.110

6

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

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

Add width and height 200% to the input
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>

edited Jun 29 '19 at 01:19

answered Jun 29 '19 at 01:14

sol

22,311
6
42
59

I believe this is the safest way for it to look the same in all browsers – vsync Oct 15 '20 at 10:39
Good solution for all browsers :) – tovaz Apr 13 '22 at 09:44
Not all heroes wear caps, Saved the day. Thank you! – MacTavish Jun 30 '23 at 11:48

score 1 · Answer 3 · edited May 23 '17 at 12:32

This can be achieved neatly with the following snippet, which sets the opacity of input to 0 (invisible) and sets the background of the parent div to the selected color.

$(document).ready(function() {
  $('#color1').on('input', function() {
    $(this).parent().css({
      background: $(this).val()
    });
  });
});

#color1 {
  border: none;
  opacity: 0;
}

.rounded {
  display: inline-block;
  border-radius: 10px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rounded">
  <input type="color" id="color1" />
</div>

jQuery is being used for changing the background of the parent to the selected color - credits goes to this answer for the 'input' event handler.

Having that said, if you also want a second color as in your snippet, just put another div as parent of .rounded and set the color to your preference.

$(document).ready(function() {
  $('#color1').on('input', function() {
    $(this).parent().css({
      background: $(this).val()
    });
  });
});

#color1 {
  border: none;
  opacity: 0;
}
.rounded,
.wrapper {
  display: inline-block;
  border-radius: 10px;
}
.rounded {
  background: black;
}
.wrapper {
  padding: 10px;
  background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="rounded">
    <input type="color" id="color1" />
  </div>
</div>

This snippet will work in all the modern browsers versions, including IE 10. See the CanIUse page for more information on compatibility.

How to Change HTML5 Color Input Inner Radius

3 Answers3