当Tab键成焦点时，CSS将高度从零增加

Question

如果我有一个我已经＆＃34;隐藏＆＃34;通过将高度设置为零，当用户选中字段时，是否可以给它高度？目前我可以在其中输入并输入字段，如果我使用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">