textareaのタグをクリックすると，２行になるようにしたい

Question

** 前提・実現したいこと**
textareaのタグをクリックすると，２行になるようにしたい.

ここに質問の内容を詳しく書いてください。

現在、airbnbの模写コーディングを行なっています．
『ボスティングを始めよう』のモーダルの中の，電話番号のformをクリックすると
２行になるformにしたい．
下記のリンクを，参考にお願いします．

リンク内容

しかし現在．textareaのタグをクリックしても，２行になりません．
教えていただける方、お願いします．

該当のソースコード

<div class="form-floating"> <textarea class="form-control" placeholder="(xxx)xxx-xxxx" value="(xxx)xxx-xxxx" id="floatingTextarea"></textarea> <label for="floatingTextarea">電話番号</label> </div>

Comments

[maisumakun]

> しかし現在．textareaのタグをクリックしても，２行になりません．

それを行うコードがどこにも書かれていないように見えますが、別な箇所にあるのでしょうか？

[simizunomoto]

ご質問ありがとうございます。

別の箇所にもありません。
２行にするコードを知りたいと思い、
投稿させていただきました．

Answer 1

勉強のために作ってみました。

<div class="form-floating">
  <textarea class="form-control" placeholder="(xxx)xxx-xxxx" value="(xxx)xxx-xxxx" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">電話番号</label>
</div>

.form-floating {
  position: relative; 
  font-size: 16px;
}
.form-floating label {
  color: gray;
  position: absolute;
  left: 10px;
  top: 18px;
  transition: .2s;
}
#floatingTextarea {
  padding: 25px 10px 0 10px;
  font-size: 16px;
}
#floatingTextarea::placeholder {
  color: transparent;
}
#floatingTextarea:focus::placeholder {
  color: gray;
}
#floatingTextarea:focus + label,
#floatingTextarea:not(:placeholder-shown) + label{
  font-size: 12px;
  top: 5px;
}

CodePen サンプル