Css 如何垂直拉伸颜色输入？

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

在下面显示的代码示例中，我试图演示这个问题。正如您所看到的，除了类型

color

之外的所有

input

元素都被拉伸到与

strong

元素相同的高度

在不使用任何静态高度样式值的情况下，如何实现“拉伸”颜色输入高度

.flexRow{
显示器：flex；
利润率：10px；
}
输入{
填充：0；
溢出：隐藏；
}
强壮的{
填充：20px 10px；
背景色：#ccc；
}

非常高的元素
非常高的元素
非常高的元素

当您检查输入类型=颜色（使用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，其他输入元素没有固定的高度，因此它们将使用

标记调整大小

如果将颜色输入的样式设置为“高度：自动”；它将调整大小：

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

---

使用

height

css属性