技術

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

投稿日:

セレクトボックスの中にfont-awesomeのアイコンを表示したい。
そんなときは注意です。
OSX / Linux / AndroidのSafari, Chrome, Firefoxでうまく表示されない問題が発生します。

試してみたこと

FontAwesomeをクラスで指定。

まずは何も考えずにこれでやってみました。

選択中も選択後もselectboxには何も表示されません。

FontAwesomeをUnicodeで指定

 

選択後に表示されるようになったので少しだけよくなりました。ただしプルダウンではアイコンがうまく表示されません。結局だめ。

 

調べてみたら、OSX / Linux / AndroidのSafari, Chrome, Firefoxでこの現象が起こるようです。javascriptで実装してねと。

今回はレーティングを星で五段階で設定したいというシンプルな内容だったので、環境依存ではない文字の星を使うことで回避しました。

Windowsで開発されている方は気づかずに不具合を仕込んでしまうことになるので、危ないですね。Macの方も思わぬところで時間がかかってしまうので要注意です。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …

no image

【Rails】パッと簡単クロスドメイン対応

どうも、中田です。 最近専らRailsでは画面を作るというより、APIを作るとい …

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …

no image

[Rails]link_toをhelperから使う

こんばんは Railsでviewを作成している時に、helperからlink_t …

[AWS S3] This XML file does not appear to have any style information associated with it. The document tree is shown below.

はじめまして。田中です。 AWSを触りはじめてから1ヶ月ちょっと。七転び八起きな …