[解決済み] Font Awesome アイコンをプレースホルダーで使用する
2022-02-07 22:36:16
質問
Font Awesome Iconをプレースホルダーで使用することは可能ですか?プレースホルダーにHTMLは使えないと書いてありました。回避策はありますか?
placeholder="<i class='icon-search'></i>"
解決方法は?
プレースホルダーの一部に別のフォントを適用することはできないので、アイコンとテキストを追加することはできませんが、アイコンのみで満足できるのであれば、それはそれで有効です。FontAwesomeのアイコンは、カスタムフォントを使用した文字だけです(
FontAwesome Cheatsheet
でエスケープされたユニコード文字については
content
ルールがあります。lessのソースコードでは、それは
変数.less
課題は、入力が空でないときにフォントを入れ替えることでしょう。jQueryと組み合わせて、次のようにします。
これ
.
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
このCSSで
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
そして、この(簡単な)jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
ただし、フォント間の移行はスムーズではありません。
関連
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み] AndroidでEditTextにプレースホルダーテキストを追加する
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み】CSSでFont Awesome アイコンを使用する
-
[解決済み】Font AwesomeのアイコンをCSSのコンテンツとして使用する。
-
[解決済み】Font Awesomeのアイコンカラーを変更することはできますか?
-
[解決済み】Font-awesome、入力タイプ'submit'
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?