How do you remove color input padding on Chrome browsers?-CodePudding

Initially, I tested this on Firefox, on which the padding can easily be removed.
Is there a way to remove this for Chrome browsers as well or is this strictly against WCAG?
I'd rather not use a custom colorpicker.

div {
    border: 3px solid red;
    width: 50px;
    height: 50px;
}

input[type=color] {
    padding: 0;
    background: lightblue;
    border: none;
    width: 100%;
    height: 100%;
}

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

CodePudding user response：

div {
    border: 3px solid red;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

input[type=color] {
    padding: 0;
    background: lightblue;
    width: calc(100%   12px);
    height: calc(100%   12px);
    margin: -6px;
}

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

A bit of a hacky solution, but it's JavaScript free and should work across all browsers.