Question

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

Answer 1

这可能不言而喻，但是由于尚未在此处提及...在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>

Answer 2

我知道它不太理想，但我最终只为我的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;
}

请注意，我还考虑了select元素的高度不一致性，该高度不一致性由box-sizing属性修复。你也可能会遇到这种情况。

为什么输入类型=＆＃34;日期＆＃34;字段比输入类型高2个像素=＆＃34; text＆＃34; Chrome中的字段？

2 个答案: