コニファ・ロゴ

csstest:ティッカーアニメーションで入力を促すplaceholder

サインアップのフォームなどで、それぞれの入力欄が何を入力するものなのか予め情報を示すplaceholderがあります。このplaceholderのテキストをティッカー(テキストを電光掲示板のように流して表示するもの)アニメーションさせて、入力欄であることを強調し、入力を促します。動作には、jQueryを使用しています。

サンプル



サンプルのhtmlソース

  1. <form>
  2. <label>  お名前:</label>
  3. <input type="text" name="name" placeholder=" お名前を入力して下さい"><br>
  4. <label>  電話番号:</label>
  5. <input type="text" name="phonenumber" placeholder=" 電話番号を入力して下さい"><br>
  6. <label>  Email:</label>
  7. <input type="text" name="email" placeholder=" Emailアドレスを入力して下さい">
  8. </form>

サンプルのCSSソース

  1. label {
  2. display: inline-block;
  3. margin-bottom: 8px;
  4. width: 150px;
  5. }
  6. input {
  7. background: rgba(255, 255, 255, 0.1);
  8. border: none;
  9. border-radius: 4px;
  10. font-size: 15px;
  11. outline: 0;
  12. padding: 10px;
  13. width: 270px;
  14. box-sizing: border-box;
  15. background-color: #e8eeef;
  16. color: #333;
  17. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  18. margin-bottom: 20px
  19. }
  20. input:focus {
  21. background: #d2d9dd
  22. }

 

戻るボタン