如何防止 input type="date" 在 Chrome 中移动答案

【问题标题】：How do you prevent input type="date" from shifting around in Chrome如何防止 input type="date" 在 Chrome 中移动
【发布时间】：2021-03-27 21:56:59
【问题描述】：

我有一支笔https://codepen.io/trajano/pen/wvgWKyd，它带有以下代码，它会显示一个文本字段，当我单击它时会将类型设置为date。

<div class="x">
  <input id="i" 
         type="text"
         placeholder="which does not appear on date input"
         onfocus="f()" 
         onblur="b()"/>
</div>

.x {
  background-color: red;
  padding: 50px;
  input {
    min-width: 200px;
    max-width: 200px;
    min-height: 20px;
  }
}

const f = () => {
  (document.getElementById("i") as HTMLInputElement).type="date";
  (document.getElementById("i") as HTMLInputElement).focus();
};

const b = () => {
   (document.getElementById("i") as HTMLInputElement).type="text";
 
};

问题出在 Chrome 上，它改变了控件的大小。在火狐上没问题。我将背景设置为红色和大，这样变化更明显。

【问题讨论】：

标签： javascript html css datepicker

【解决方案1】：

简单。

设置输入的高度为20px（或者你需要的高度）并添加box-sizing:border-box;

【讨论】：