input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル

メール、リンク、外部リンク、ショッピングカート、ソーシャルメディアなどのアイコンを前後に添えたフォームを実装するチュートリアルを紹介します。

デモのキャプチャ

Mini Collection for Prefix & Postfix Input Form

デモ

デモのキャプチャ

デモページ

デモは3種類、前添え、後添え、前後+カラーリングのパターンがあります。

デモのキャプチャ

Prefix
前に添えたパターン

デモのキャプチャ

Postfix
後に添えたパターン

デモのキャプチャ

Coloured
前後+カラーリングのパターン

実装

HTML

HTMLはシンプルで、アイコンやカラーリングはclassで判別します。

<!-- 1st prefix with email icon and default color (grey) -->
<input placeholder="Type here..." class="ppfix pre email" type="text">

<!-- 2nd postfix with google plus icon and default color (grey) -->
<input placeholder="Type here..." class="ppfix post gplus" type="text">

<!-- 3rd prefix with home icon and blue color -->
<input placeholder="Type here..." class="ppfix pre home blue" type="text">

コードは上から順に、前、後、カラーとなっており、下記のように組み合わせて使用します。

サイトのキャプチャ

実装のイメージ

デモのclassの切替はjQueryを使用しており、アイコンはFont Awesomeを使用しています。
また、古いブラウザにプレースホルダテキストを表示するためにModernizrをベースにスクリプトとスタイルシートを使用しています。

実装に必要なファイルは全てダウンロードできます。
ダウンロードは「Get the File」からです。

top of page

©2017 coliss