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

user_907199 0
Viewed 4781

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/

css html
2 Answers

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>

user_28278230

Elements default width and height may differ from browser to another.

Specify the height and padding for the input element to make them all have the same height, and specify the width to make them all have the same width.

Give all the input elements a 100% width, and change the parent div width depending on your needs.

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

user_45750040
Related