why input type=date is different width to input type=text?

Question

Within the same container input text with display: block stretches to fill available space as expected but if I change type to 'date' it becomes shorter. Why?

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

Result: text1 and text2 are the same size but date is shorter.

https://jsfiddle.net/e0v13ns3/

Answer 1

An input of type text has a size attribute which defaults to 20, and give it an initial width.

An input of type date doesn't, its width is set using CSS, hence their initial width differs.

Note, these preset width's can differ between browsers as well.

Here is a sample where the first input has a size of 10

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