为什么输入类型=“日期”字段比Chrome中输入类型=“文本”字段高2个像素？

Question

我在Chrome中并排有一个输入type =“ date”字段和一个输入type =“ text”字段。输入日期字段比文本字段高2像素。有人知道为什么会这样吗？查看this page后，无论样式如何，它似乎都会发生。

Answer 1

我知道这不是理想的，但是我最终只是为我的padding设计了input[type="date"]属性的样式，而不是为我的input设计了样式。

input, select, textarea {

    padding: 3px 5px;

    /* Fix for input and select elements being different sizes */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

input[type="date"] 
{
    padding: 2px 5px;
}

请注意，我还考虑了选择元素的高度不一致问题，该问题已通过box-sizing属性修复。您也可能会遇到此问题。

Answer 2

这可能不言而喻，但是由于这里尚未提及。...在date和您要匹配的其他输入上设置显式高度，这将成为非问题。

[花了很多时间研究这个问题，不幸的是没有找到其他解决方法。

然后出现另一个问题：似乎本机步进器不会自动将其自身与垂直中心对齐。

我尝试在输入上使用display: flex; align-items: center;（无影响），但最后，直接使用::-webkit-inner-spin-button定位微调器并应用align-self: center;可以解决问题。

input[type="text"],
input[type="date"] {
  height: 2rem;
  display: flex;
  
  background: white;
  border: 2px solid blue;
  padding-left: .5rem;
  padding-right: .5rem;
}

input[type="date"]::-webkit-inner-spin-button {
  align-self: center;
}

<label>
  <span>Text</span>
  <input type="text">
</label>

<label>
  <span>Date</span>
  <input type="date">
</label>