为什么input type=date的宽度与input type=text不同？

Question

在同一容器中，使用display: block的输入文本会如预期那样拉伸以填满可用空间，但如果我将类型更改为“date”，它会变得更短。为什么呢？

HTML：

  <div class="panel">
    <div class="input-group">
      <label for="text1">text1</label>
      <input id="text1" type="text"/>
    </div>
    <div class="input-group">
      <label for="date">date</label>
      <input id="date" type="date" />
    </div>
    <div class="input-group">
      <label for="text2">text2</label>
      <input id="text2" type="text" />
    </div>
  </div>

CSS（层叠样式表）：

.panel {
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    flex-grow: 1;
    text-align: left;
}

label, input {
  display: block;
}

结果：text1和text2的大小相同，但日期较短。

https://jsfiddle.net/e0v13ns3/

- Maxim Suponya

---

什么浏览器？ff可以。 - yellowsir

所有的“input”字段都有一些默认宽度，这个宽度因浏览器而异。您可以添加“width: 100%”来填充可用空间。完全没有问题... - Mohammad Usman

@yellowsir 这在Edge和Chrome中都发生了。在FF中尝试过，但那里没有发生。 - Maxim Suponya

@MaximSuponya 这恰好证明了Mohammad的观点。浏览器有时会有不同的样式。 - ProEvilz

我发现有一件奇怪的事情，就是如果在任何开发工具面板中启用用户代理/浏览器样式，那么input和input[type="date"]都没有任何默认的宽度（或高度）值。实际上，Chrome的“计算”样式甚至会链接回样式的源，但宽度却没有任何链接。 - Quangdao Nguyen

Answer 1

type="text"的标签有一个默认大小为20的size属性，可以设置初始宽度。

type="date"的标签没有默认大小，需要使用CSS来设置宽度，因此它们的初始宽度不同。

请注意，这些预设宽度在不同浏览器中可能会有所不同。

以下是一个示例，其中第一个标签的大小为10：

<div>
  <input id="text1" type="text" size="10" />
</div>
<div>
  <input id="date" type="date" />
</div>
<div>
  <input id="text2" type="text" />
</div>

- Asons

Answer 2

元素的默认宽度和高度可能因浏览器而异。

为input元素指定height和padding，使它们都具有相同的高度，并指定width，使它们都具有相同的宽度。

给所有的input元素一个100％的宽度，并根据您的需求更改parent div的宽度。

.panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    flex-grow: 1;
    text-align: left;
    width: 30%;
    margin-right: 3%;
}

label, input {
  display: block;
  height: 20px;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div class="panel">
    <div class="input-group">
      <label for="text1">text1</label>
      <input id="text1" type="text"/>
    </div>
    <div class="input-group">
      <label for="date">date</label>
      <input id="date" type="date" />
    </div>
    <div class="input-group">
      <label for="text2">text2</label>
      <input id="text2" type="text" />
    </div>
  </div>

- Mario Rawady

---

让我们看一下。这个问题的回答是否是“如果我将类型更改为'date'，它会变短。为什么？”不，不是的。这是一个解决方案，而不是对问题的解释。 - ProEvilz

@ProEvilz，确实如此。我怀疑背后可能有一些推理，我想知道是什么。 - Maxim Suponya