入力してみよう! ONLY EISUUJI

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/fancyInput.css" rel="stylesheet" />
<style>
	#fancyInput .fancyInput{
		max-width:80%;
		min-width:50%;
		font-size: 20px;
		font-weight: bold;
		color:#333;
		vertical-align:middle;
		line-height:1.3;
		overflow:hidden;
		text-align:left;
		box-shadow:0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12px rgba(255,255,255,.1);
		padding:8px 20px;
		background:rgba(0,0,0,.1);
		border-radius:10px;
	}
	#fancyInput .input {
		width: 500px;
		margin: 20px auto;
	}
	#fancyInput .inner { text-align: center; }
</style>
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/fancyInput.js"></script>
<script>
	$(window).load(function(){
		$('#fancyInput input').fancyInput();
	});
</script>
<p class="title">入力してみよう! ONLY EISUUJI</p>
<div class="input effect1">
	<div>
		<input type="text">
	</div>
</div>
<div class="input effect2">
	<div>
		<input type="text">
	</div>
</div>
<div class="input effect3">
	<div>
		<input type="text">
	</div>
</div>
<div class="input effect4">
	<div>
		<input type="text">
	</div>
</div>
<div class="input effect5">
	<div>
		<input type="text">
	</div>
</div>

fancyInputについて

fancyInputは、入力フォームの文字入力をユニークな見た目、動作に変更するプラグインです。
日本語入力には対応していないようです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Placeholders

    Placeholders

    IE6-9でplaceholderと同じ機能を実現する

  • Formly

    Formly

    簡単にフォームにきれいなスタイルを設定することができる

  • DropKick

    DropKick

    セレクトボックスの見た目をリッチに

  • timepicker

    timepicker

    時間の入力を簡単にしてくれる

  • Selecter

    Selecter

    セレクトボックスの見た目、使い勝手を向上してくれる