How do I make color inputs appear consistant minimum widths between browsers?

user_14082090 0
Viewed 26

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:

enter image description here

FF Result:

enter image description here

firefox css html
1 Answers

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/

user_4365600
Related