効果:検索ボックス。図:
実装:最初は、検索ボックスは、2つの入力、検索、ボタンで、2つの部分に分かれて、次に入力虫眼鏡アイコンフォントを追加するために=「ボタン」を入力します。あなたが入力するアイコンフォントを追加するときしかし、我々は表示できないかを調べます。図は次のとおりです。
メンタリティー「悪魔が存在しなければならない、珍しい物事を」保持し、静かなミミは、入力ボタン要素を置き換えるので、彼はなりました。少し無知(O '・Sファクトリー・ `○)
これまでのところ、問題が解決されています。ハッピー![]〜(¯▽¯)〜*
単純ですが、だけでなく、コードを貼り付けます。ハハ~~~
HTML:
< ボタンタイプ= "ボタン" クラス= "検索-BTN" > </ ボタン>
CSS:
.search-box .search-btn{ float: left; width: 50px; height: 40px; background: #00a4ff; font-family: "icomoon"; font-size: 20px; color: #fff; border: 0; } .search-box .search-btn::before{ content:"\e987"; }
注:上面所使用的 icomoon 字体为 icomoon 网站下载,可自行下载使用,IcoMoon App - Icon Font, SVG, PDF & PNG Generator
欢迎知道原理的小哥哥、小姐姐们在评论区告知。 O(∩_∩)O