$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

<script src=".1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

Even though I made the <input type='color'> rounded, when I input a value (at least on safari) it changes the circle to a square instead. How can I do this? thanks.

• javascript
• html
• css
• input
• colors

• overflow:hidden ? and border:none, outline:none .. – Temani Afif Commented Feb 16, 2018 at 17:59
• @TemaniAfif Nope, none of them or binations of them works. – MBJH Commented Feb 16, 2018 at 18:02
• Webkit has some unofficial CSS selectors that might be useful. Check out the answer here: Webkit CSS to control the box around the color in an input[type=color]. It works for me in Chrome, but of course is not very cross-browser patible. – showdev Commented Feb 16, 2018 at 18:07
• Related reference: Styling native elements. – showdev Commented Feb 16, 2018 at 18:16

7 Answers 7

My idea:

1. create one inline-block <span>
2. set input[type=color] to not visible.
3. bind click event of <span> to trigger <input>.click().

Because <input> is not friendly for shape customization.

$("#colour").change(function(event) {
    console.log($(this).val());
    $("#color_front").css('background-color',$(this).val());
});

$("#color_front").click(function(event) {
    $("#colour").click();
});

input[type=color] {
    display: none;
}
span {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  background-color:red;
  display:inline-block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>

In a similar situation earlier, what I did for this was to add two extra styles with pseudo-selectors ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper.. Don't know the exact reason..Somehow got this answer at that time (probably from SO itself ;) )..

Add,

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

See the snippet below..

$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

UPDATE

I think I got the tutorial from which I got the solution.. Here is it..

I personally like this solution because it does not involve JS.

<style>
.color-input-wrapper {
  height: 1.5em;
  width: 1.5em;
  overflow: hidden;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.color-input-wrapper  input[type=color] {
    position: absolute;
    height: 4em;
    width: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>
<div class="color-input-wrapper">
     <input type="color">
</div>

<style>
   input[type="color"] { scale: 3 }

    .input_container {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        overflow: hidden;
        border: orange 2px solid;
    }
</style>

<div class="input_contianer">
    <input type="color">
</div>

This is my solution

.colorInput {
   width: 90px;
   height: 90px;
   overflow: hidden;
   border-radius: 200rem;
}

input[type="color"] {
   width: 140%;
   border: none;
   height: 140%;
   outline: none;
   transform: translate(-30px, -30px);
}

<div class="colorInput">
    <input type="color" value="#333333" class="pickColor" />
</div>

And my solution, since I just wanted to add an inner shadow and this (kind of overplicated