How to vertically stretch a color input?

user_3157038 0
Viewed 246

Why does a color input not behave like all other input types when it comes to stretching height in a flexbox container?

In the code example shown below I tried to demonstrate the issue. As you can see all input elements except the one of type color are stretch to an equal height of the strong element.

What is going on and how do I still achieve a "stretched" color input height without using any static height styling values?

.flexRow {
  display: flex;
  margin: 10px;
}
input {
  padding: 0;
  overflow: hidden;
}
strong {
  padding: 20px 10px;
  background-color: #ccc;
}
<div class="flexRow">
  <input type="color" />
  <strong>Very high element</strong>
</div>
<div class="flexRow">
  <input type="submit" />
  <strong>Very high element</strong>
</div>
<div class="flexRow">
  <input type="text" />
  <strong>Very high element</strong>
</div>

This issue occurred to me on Firefox 63 and Chromium 70 on Ubuntu 18.04, please let me know if you don't have this issue with your setup.

flexbox css
1 Answers

Well when you inspect the input type=color (with F12), you see the following:

input[type="color" i] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
    background-color: buttonface;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(169, 169, 169);
    border-image: initial;
    padding: 1px 2px;
}

The height is set to 23px and the other input elements don't have a fixed height, so they will resize with your <strong> tag.

if you set the style of the color input to height: auto; it will resize:

input[type="color"] {
    height: auto;
}
user_104944310
Related