画像のアドレス入力フォームを実装したい

Question

画像のアドレス入力フォームを実装したい

Airbnbサイトの模写にて上記のようなアドレス入力フォームの実装の仕方が分かりません。
inputタグの中にbuttonタグを挿入することはできた（position:relative absoluteを使いました）のですが、上記の特徴である

・『まずは仕事用メールアドレス入力から』の部分をクリックしてもテキスト入力ができる
・入力フォームをクリックし、テキスト入力ができるようになると外枠が緑色になる
・テキストを入力すると『メールアドレス追加』のbuttonタグが選択できるようになる（デフォルトでは選択できません）

の実装方法が分かりません。

※追記
・入力フォームをクリックし、テキスト入力ができるようになると外枠が緑色になる
↑
疑似クラスの：focusをinputタグに指定し、 border: 1px solid #008080;とすることで実装することができました。

試したこと

検証ツールなどを確認しましたが該当部分がどこの部分なのかわからず頭を悩ませております。

補足情報（FW/ツールのバージョンなど）

AirbnbのURLです。

https://www.airbnb.jp/work?_set_bev_on_new_domain=1594373010_YjQzNzkwYWZmNTA0

Answer 1

テキストをクリックした時に該当のinput要素をフォーカス状態にするには、
label要素を使用し、実装します。
下記リンクにて、使用の仕方が記載されています。

<label> - HTML: HyperText Markup Language | MDN

buttonのアクティブ、非アクティブのコントロールは、
JavaScriptを使うのが手っ取り早いかと。
button要素を、デフォルトではdisabled状態にし、
JavaScriptにて、input要素がフォーカスされている時には、disabledを解除する、などです。
button要素のスタイルは、disabledかどうかでスタイルを変えればいけるかと。

Comments

[black1227]

ご回答いただきありがとうございます。
label要素を使うことで具体的にどのような箇所が実装できるのでしょうか？
お手数をおかけし、申し訳ございません。

[miyabi_pudding]

リンク先はご覧になって下さい。
テキスト（label）をクリックして、input要素にフォーカスしたり、ラジオボタンを直接クリックしないでも切り替えたりが可能になります。

[miyabi_pudding]

回答に追記しました。

[black1227]

やはりボタンに関してはJavaScriptなのですね。
JavaScriptに関してはまだノータッチなのでこれから勉強宇していきたいと思います。
ご丁寧な回答をありがとうございました。