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

Created by: 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