css - 如何垂直拉伸(stretch)颜色输入？

Question

当涉及到 flex 盒容器中的拉伸(stretch)高度时，为什么颜色输入的行为与所有其他输入类型不同？

在下面显示的代码示例中，我试图演示这个问题。如您所见，除了 color 类型的元素之外，所有 input 元素都被拉伸(stretch)到与 strong 元素相同的高度。

这是怎么回事，我如何在不使用任何静态高度样式值的情况下仍然实现“拉伸(stretch)的”颜色输入高度？

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

我在 Ubuntu 18.04 上的 Firefox 63 和 Chromium 70 上遇到了这个问题，如果您的设置没有遇到这个问题，请告诉我。

Answer 1

好吧，当您检查输入 type=color(使用 F12)时，您会看到以下内容:

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;
}

高度设置为 23px 而其他输入元素没有固定高度，因此它们将根据您的 <strong> 调整大小。标签。

如果你设置color input的样式为height: auto;它会调整大小:

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