検索窓の検索マークの表示について。入力した文字と検索マークが被ってしまう。

前提・実現したいこと

Airbnb（LP）の模写をBootstrapを使わずにcss/jQueryで取り組んでいます。
https://ja.airbnb.com/gift
Airbnb（LP）のナビゲーションバーに設置されている検索窓と同じように実装したいです。
1文字入力後も虫眼鏡マークの継続表示
2文字入力後に虫眼鏡マークをクリックすると検索される
3枠内テキスト「探す」と虫眼鏡マークの色をそれぞれ違う色にする

発生している問題・エラーメッセージ

上記1〜3の同時実装が上手く出来ない

下記のコードで見た目は整いました

文字入力をすると検索マークと被ってしまう

該当のソースコード

HTML
1headタグ内  <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
2
3<body>
4 <header>
5     <div id="header-left" class="clearfix">
6        <i class="fab fa-airbnb"></i>
7        <div id="header-search">
8          <form action="#" method="post">
9            <!-- <input class="input-icon" type="submit" value="&#xf002;" class="fas"> -->
10            <button type="submit" id="ibtn"><i class="fas fa-search"></i> </button>
11            <input id="input-icon" type="search" name="search" placeholder="探す" autocomplete="off">
12            <!-- <i class="fas fa-search"></i> -->
13          </form>
14        </div>
15     </div>
16     <div id="header-list" class="clearfix">
17       <ul id="list" class="clearfix" >
18         <li><a href="#">ホストをはじめる</a></li>
19         <li><a href="#">ヘルプ</a></li>
20         <li><a href="#">登録する</a></li>
21         <li><a href="#">ログイン</a></li>
22       </ul>
23     </div>
24 </header>
25

css
1 #input-icon::placeholder{
2      text-indent: 40px;
3  }
4
5  #ibtn{
6      position: absolute;
7      left: 10px;
8      top: 50%;
9      -ms-transform: translate(0%,-50%);
10      -webkit-transform: translate(0%,-50%);
11      transform: translate(0%,-50%);
12      background: none;
13      color:#484848;
14      border: none;
15      font-size: 20px;
16
17  }
18・結果、文字入力時に文字と虫眼鏡マークが被ってしまった。
19

その他試したこと

・placeholder="探す"→placeholderなので文字入力をすると虫眼鏡マークも消えてしまう
・アイコン用に<input>を別で作成＋positionを使う
・background-imageでアイコンを表示→ただのイメージなので検索マークをクリックしても検索されない
などを試してみましたが、1〜3をすべて同時に実現する事が出来ず全く見当違いな結果になってしまいました。

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

macOS Mojave バージョン10.14.5
google chrome
バージョン: 74.0.3729.157（Official Build）（64 ビット）

お世話になっているブログにbootstrapは修正が必要になった時に初心者では面倒なので使わない方がいいと書いてあったため、今回はBootstrapを使わない方法で模写に取り組んでいますが、このようなレイアウトの場合に最適な方法もあれば教えていただけると助かります。

m.ts10806

2019/05/22 01:38 編集

cssもHTML同様コードブロックで囲ってください。また、OSのバージョンよりもブラウザの種類とバージョンのほうが大事なのでそちらも追記してください。「今どのように表示されているか」画面キャプチャもご提示ください。本筋と関係ないのでこちらでコメント > bootstrapは修正が必要になった時に初心者では面倒なので使わない方がいい時と場合によります。「修正」がどの程度の修正かというところですね。 BootStrapをメインにしていてもサブにしていてもその機能だけで全て作り上げるのってほとんどないので、必ず「独自の色」をだしていく必要があります。「BootStrapで大枠部分を使う」と定義すればほとんど自分がやりたいようにできますし「基本的には後勝ち」なので、少し慣れていけばそこまで面倒はならないと思います。 ※BootStrap本体改修する必要が出るか否かでも違いますが、出たとしたらそれは技術力をアップさせるチャンスです

benkyosuruo

2019/05/22 01:38

bootstrapに関しての回答ありがとうございます。まさに知りたかった事でした。質問内容にまた不足があった場合はお教えください。すみません。

m.ts10806

2019/05/22 02:09

「Bootstrapを使わない方法」は良いのですが、アイコン部分は外部の仕組みを使われていますし、HTMLも該当部分以外含めた全体が分かるようなコードでご提示いただけますか？ ※私見ですが、模写先がBootStrapを利用しているのでしたらそれはそれで倣ったほうがいいとは思います。枠組みだけでも自作って結構しんどいですし、そこに時間をかけるのが勿体ないときもありまる。学ぶ姿勢は素晴らしいとは思います。

benkyosuruo

2019/05/22 03:40

ご指摘本当にありがとうございます。次回の模写からは特にBootstrap無し縛り無しでオリジナルの様に模写してみたいと思います。勉強になります。

行動規範の内容に同意します

回答2件

自己解決

bootstrapを使用して解決しました。

投稿2019/05/23 00:11

benkyosuruo

総合スコア16

#input-icon::placeholderのtext-indentをやめて、#input-iconのpadding-leftで調整すれば良いですよ。

投稿2019/05/22 02:44

yhg

総合スコア2161

benkyosuruo

2019/05/22 03:50

ご回答ありがとうございます。すみません、色々と試しすぎていくつか記載漏れがあったのですが、padding-leftも試しており同じく検索結果と被る結果になってしまいました。

yhg

2019/05/22 06:36

padding-leftで出来ました。というか、apple.comなど多くのサイトで同様のアプローチで検索窓作ってるので出来ないわけがない。優先度の関係などで適用されてなかったとかそういうオチでは… https://jsfiddle.net/zbysj3u7/1/ 別のアプローチだと、<input type="search">のbox-shadowやborderを消して、<form>を装飾して、flexboxでアイコンと検索フィールド並べるとか。

benkyosuruo

2019/05/23 00:12 編集

padding-leftで見た目は整うのですが、どうしても文字入力後の文字とマークの被りが解消できませんでした。私のhtmlの構造が問題かもしれません。今回はmts10806さんのご指摘の通りBootstrap使用で模写することにしました。回答ありがとうございました。

行動規範の内容に同意します

あなたの回答