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

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

sponsors

使用方法

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; }

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net