Question

为什么在flexbox容器中拉伸高度时，颜色输入的行为不像所有其他输入类型那样？

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

这是怎么回事，如何在不使用任何静态高度样式值的情况下仍达到“拉伸的”颜色输入高度？

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

我在Firefox 63和Ubuntu 18.04上的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>标签进行调整大小。

如果将颜色输入的样式设置为height：auto;它将调整大小：

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

如何垂直拉伸颜色输入？

1 个答案: