コニファ・ロゴ

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

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

サンプル



サンプルのhtmlソース

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

サンプルのCSSソース

label {
  display: inline-block;
  margin-bottom: 8px;
  width: 150px;
}
input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  font-size: 15px;
  outline: 0;
  padding: 10px;
  width: 270px;
  box-sizing: border-box;
  background-color: #e8eeef;
  color: #333;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 20px
}
input:focus {
  background: #d2d9dd
}	

 

戻るボタン