css - How to style color type input

Question

I'm working on a project that requires a color input within a form. The default color input displays as a short, wide rectangle with what appears to be a grey outline. The grey outline is actually a background color, and attempting to apply a border and border radius to style the actual color swatch as a circle results in a smaller circular border that lies beneath the rectangular color swatch.

Styling the width and height in CSS allows me control over the rectangular color swatch. Styling the padding and background color allows me to control the "border". I can't work out how to adjust the way the "swatch" displays, or if it is even possible.

Answer 1

I was able to achieve the desired effect by styling the color input's id as follows:

#colorPicker {
  background-color: #F5FF55;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  padding: 5px;
}

I still can't seem to change the shape of the color input swatch. Not sure if this is possible.