text - タッチすると展開 (および折りたたまれる) テキスト ボックスを実装するにはどうすればよいですか

Question

すべてのブラウザーで実行されるモバイル Web サイトでこれを実現する方法についてアドバイスをいただき、ありがとうございます。

Answer 1

css 3d 変換を使用できます

何かのようなもの

input {
    width: 280px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}

input:focus {
    width: 340px;
}