質問: ### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 HTMLとCSSでホームページを真似る練習をしています。 inputの中にfontawesomeのiconを固定したいのですが、調べてもやり方が全く分かりませんでした。 ![イメージ説明] 下記のようにしたい。 pleceholderやvalueのような消えてしまうのではなく、iconを固定したい。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d564f4de170b0c5a3226c6f6aa6b00eb.png) url(https://www.airbnb.jp/gift)のサイトです。 本気でフリーランスを目指している初心者な自分にわかる方どうか教えたいただきたいです。 宜しくお願い致します。
回答: firefoxなどのブラウザの開発者機能で「要素を検証する」(類似の機能は他のブラウザにもあります)、などとすればわかりますが、これはinputに見せかけたdivです。 「探す」の部分にborderのないinputがあり、外枠やアイコンはdivで配置しています。 で、inputの中に要素を埋め込む(ように見せる)ことはかなり難しいと思います。 見かけでそういうふうに見えるようにデザインでどうにかする方がメンテナンスの事も考えると最適かと思います。