殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」

殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」サンプル ネタ的なやつですが、殺風景なフォームを華麗に装飾することができるjQueryプラグインfancyInputです。
もしかしたらコンバージョン率が上がるかもしれません。

使用方法 fancyInputからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="fancyInput.js"></script>
<script type="text/javascript">
$(function() {
$('input').val('').fancyInput()[0].focus();
});
</script>

inputエリアは下記のように記述します。
<div>
<input type='text' />
&l;t/div>

外側のdivには.fancyInputが振られるのでCSSで下記のように整えます。
.fancyInput{ max-width:80%; min-width:50%; font-size:60px; color:#FFF; 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; }
殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」サンプル

sponsors

「殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」」をシェアする

記事作成:
記事URL:

TOP > > > 殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」