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

Question

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

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

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

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

Answer 1

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

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

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

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