input type="color" space between border and selected color

I have a problem with color input

As you can see there's a gap between black border and color itself but I want to remove it

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#color-picker {
  border: 5px solid black;
  border-radius: 5px;
  width: 207px;
  height: 60px;
  padding: 0px;
  appearance: none;
  cursor: pointer;
  background: none;
}

<!-- language: lang-html -->

<!-- some other html up here -->
<div class="color-holder">
  <div class="content">
    <div id="colors">
      <!-- some colors here -->
    </div>
    <input type="color" id="color-picker">
  </div>
</div>
<!-- some other html down here -->

<!-- end snippet -->

I thought padding: 0 could help but it did nothing at all and I just have no idea what to do

Did you try with outline property? Keep in mind accesibility if you use it

You can create a label for the input and hide the input .. and with some lines of javascript you can achieve what you want

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var theInput = document.getElementById("color-picker");
var theLabel = document.getElementById("trigger-color-picker");

theInput.addEventListener("input", function() {
  theLabel.style.background = theInput.value;
}, false);
theInput.dispatchEvent(new Event('input'));  // trigger the input event on load

<!-- language: lang-css -->

#trigger-color-picker {
    border: 5px solid black;
    border-radius: 5px;
    width: 207px;
    height: 60px;
    padding: 0px;
    appearance: none;
    cursor: pointer;
    display: block;
 }
 #color-picker{
  display: none;
 }

<!-- language: lang-html -->

<!-- some other html up here -->
<div class="color-holder">
    <div class="content">
        <div id="colors">
            <!-- some colors here -->
        </div>
        <label id="trigger-color-picker" for="color-picker"></label>
        <input type="color" id="color-picker">
    </div>
</div>
<!-- some other html down here -->

<!-- end snippet -->

The idea here is: the input type color has styles by default you can't change it .. So we will create a custom one and instead of change the input style we will change the label style

Thanks everyone for some ideas but I finally resolved this issue with ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#color-picker::-webkit-color-swatch {
    border: none;
}

#color-picker::-webkit-color-swatch-wrapper {
    padding: 0px;
}

<!-- end snippet -->

border: none removes that 1px white outline around color value

padding: 0px removes that gap between border and color value

And obviously also need to add ::-moz-color-swatch and ::-moz-color-swatch-wrapper with same props