よろしくお願いいたします。
現在、レスポンシブ対応のweb画面を製作中です。
現在は某サイトのUIを参考に、ログイン部分を作っています。
参考サイト
テキストエリアの部分に、下記画像のように左端部分にアイコンをつけたいと思っています。
参考サイトを検証ツール(Chromeデベロッパーツール)で調べたり、ソースを見たりしているのですが、
参考サイト通りのアイコンの付け方がわかりません。
ちなみにテストアイコンとして、Awesomeアイコンを使っています。
テキストエリア部分のコードは以下なのですが、どのようなHTMLを記述すればよいのか、
またどのようなCSSを指定すれば参考サイトのようなUIを実現できるのかがわかりません。
<input type="text" id="user_id" autocapitalize="off" class="text-input" name="user_id" value="" size="24" maxlenght="20" placeholder="メールアドレス" data-prompt-position="topRight: 10;" />
実現方法に特に指定はありません。
有職者の皆様、どうぞご教示のほどよろしくお願いいたします。
ボールドテキスト
サンプルコード等いただけると尚幸いです。
以下、全体のHTMLです。
<div id="login"> <div class="login-wrapper"> <form id="loginFrm" action="/authenticate_check" method="post" autocomplete="off"> <div id="inputbox"> <div class="inputbox-wrapper"> <h1><a href="index.html">Inventoies</a></h1> <div id="usrId"> <!-- 質問部分該当箇所 --><input type="text" id="user_id" autocapitalize="off" class="text-input" name="user_id" value="" size="24" maxlenght="20" placeholder="メールアドレス" data-prompt-position="topRight: 10;" /> </div> <br> <div id="usrPass"> <!-- 質問部分該当箇所 --><input type="password" id="password" class="text-input" name="password" value="" size="24" placeholder="パスワード" data-prompt-position="topRight: 10;" /> </div> <br> <div id="login_btn"><input type="submit" value="ログイン" style="font-size: 22px;"/></div> <br> <p id="reset_password"><a href="">パスワードをお忘れの方はこちら</a></p> <p id="new_user"><a href="">新規アカウント作成</a></p><br /> </div> </div> </form> </div> </div>
回答4件
あなたの回答
tips
プレビュー