切换到焦点时，CSS 从零开始增加高度

Question

如果我有一个通过将高度设置为零来“隐藏”的 div，是否可以在用户进入该字段时为其提供高度？目前，我可以切换到它并在该字段中键入内容，如果我使用 javascript 展开它，您可以看到在高度仍设置为零时键入该字段的内容。

Answer 1

对于输入元素，您可以通过 CSS 实现它，例如:

input {
  height: 0px;
  border: 0;
  background: transparent;
  transition: all .3s linear;
}

input:focus {
  height: 40px;
  border: 1px solid lightgray;
  background: white;
}

<p> Click anywhere in snippet window first, then tab with keyboard</p>
<input type="text">