Menu
Take the following HTML and CSS:
<html>
<body>
<td class="colorpick">
<input type="color" name="head" value="#aec7e8">
</td>
</body>
</html>
input[type="color"] {
border: none;
width: 24px;
height: 24px;
}
On Chrome, Safari, and Internet Explorer, this appears to follow the CSS, and the input appears as a square.
Chrome screenshot
Safari screenshot
However, on Firefox, it appears as a very very narrow rectangle that does not follow the CSS. This is consistent between devices and between versions of Firefox. How do I make the color input match the shape that it is in the other browsers?
Firefox screenshot
Desired:
FF Result:
880
asked Nov 22 '25 10:11
Let's get rid of borders, margins and paddings:
input[type="color"] {
border: none;
width: 24px;
height: 24px;
border:0;
margin:0;
padding:0;
}
Fiddle: https://jsfiddle.net/qkyhn7pj/
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
