入力してみよう! 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プラグイン

  • iCheck

    iCheck

    チェックボックス、ラジオボタンのなどの見た目をPC,スマホ、クロスブラウザで統一できる

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示

  • SlidingLabels

    SlidingLabels

    入力フォームのラベルに動きをつける

  • Autosize

    Autosize

    テキストエリアの高さを入力内容に応じて動的に伸縮

  • Selecter

    Selecter

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