<input type="color" class="form-control"> as colorpicker is displayed badly

[cvrebert]

When browsers such as Chrome and Firefox present a proper colorpicker UI for <input type="color">, if you use .form-control on the input, it's displayed kinda weirdly.

In Chrome, the padding scrunches the actual color swatch and makes it invisible:

In Firefox, the height of the input doesn't match the height of <input type="text" class="form-control">:

Safari doesn't support color inputs, so it shows a plain text input, which looks fine.
I haven't tested on IE/Edge.
CC: @mdo

[patrickhlauke]

Neither IE nor Edge currently support type="color", so visually it's the same as for type="text"

[eliottrobson]

There's a couple of inconsistencies with heights on elements. I've managed to fix these with a few explicit height declarations which normalizes select and input heights. This also works for input type color too.

http://www.bootply.com/NjBlSmhHNm

[vanillajonathan]

@patrickhlauke Edge nowadays (version 14) supports type="color".

[mdo]

Agreed this needs addressing, but I don't think a fully custom (square) component like in the cross referenced PRs is the way to go. I think a modifier class or something similar to that would be helpful though for the browsers that do support it.

[oktalk]

There's been a lot of back and fourth on this issue. I would suggest removing support for the color attribute. It's glaringly broken now, and has limited browser support. I could open a PR if desired.

You can do a bit with pseudo classes, but it's still funky. Here's a pen: https://codepen.io/oktalk/pen/BRJKYd

[gvangool]

I've resolved it in our local build by setting the same height as on <select/>

input[type=color].form-control {
    height: $input-height;
}

[rparundekar]

I fixed mine by using @gvangool's solution, but by setting the padding as 0px.

input[type=color].form-control {
    padding: 0px;
}

[el07694]

input[type=color].form-control {
height: calc(2.25rem + 2px)!important;
}

solved for me!!