フォーカスにタブ移動したときのCSSの高さがゼロから増加する

Question

高さをゼロに設定してdivを "非表示"にした場合、ユーザーがタブをタップしたときの高さを指定できますか？現在、私はそれにタブすることができ、フィールドに入力します。もしjavascriptでそれを展開すると、高さがゼロに設定されているときにフィールドにキーイングされたものが表示されます。あなたのようなもので、CSSを経由してそれを達成することができ、入力要素について

Answer 1

：？

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">