<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!!

[MartijnCuppens]

Since #26820, a height is added to the .form-control which solves this problem.

[mariusa]

height: auto still results in the same bad display (1 thin line instead of rectangle), sometimes, with bootstrap 5, for .form-control-color. Screenshot (same as above)

[vanillajonathan]

https://getbootstrap.com/docs/5.1/forms/form-control/#color

[mariusa]

Exactly the same control sometimes shows like this. I've seen this on multiple user devices, can't figure out why:

[patrickhlauke]

well, it would be good to isolate a reduced test case (without any non-bootstrap styles in the way), and trying to pin down which browsers/operating systems/etc it happens on. "sometimes" is a bit too vague to try and trouble-shoot