input要素内のcss適用について宜しくお願いします。

Question

input要素をクリックしたときに、要素内の虫眼鏡のフォントアイコンだけを青くしたいのですが、
他の入力した文字まで青くなってしまいます。

虫眼鏡のフォントアイコンだけ青くする場合はどうしたら良いでしょうか？

クリック前、クリック時、完成イメージの画像を添付します。
何卒、ご回答宜しくお願いします！

<div class="search">
   <input type="text" value="&#xf002; キーワード検索" class=" fas ">
</div>

input[type=text] {
    width: 350px;
    height: 35px;
    border-style: none;
    border-radius: 30px;
    background: #E6ECF0;
    font-size: 15px;
    color: #657786;
    margin-left: 32px;
    margin-top: 8px;
}

input[type=text]:focus {
    background: white;
    border: 0.5px solid #1DA1F2;
    outline: 0;
    color: #1DA1F2;
}

クリック前

クリック時（入力した文字も青くなる）

完成イメージ

Answer 1

inputのvalueとして入れるのではなく、外で、labelとして要素を用意し、位置をinput内に来るように調整してください。
inputのpaddingを調整すれば入力文字に被らないようにできます。
それに。valueにいれてしまうと、なにも入力されないときに全部送信されます。

参考：
Materialize

Comments

[rvuUBbCHlsCjt2a]

ご返信遅れて申し訳ございません。
大変わかりやすいご回答、本当にありがとうございます！
無事解決できました！