3. css：cssで作るシンプルなフォーム（input・textarea）

css：cssで作るシンプルなフォーム（input・textarea）

css：cssで作るシンプルなフォーム（input・textarea）

シンプルなので応用が利く、cssを使ったフォームのサンプルです。
pngもダウンロードできるようにしました。

サンプル

モダンブラウザ対応してると思われます。
IE8以下は未対応。
ただし、IE9はplaceholderのみ未対応です。

HTML

<section id="demo-sec" class="demo-section">
	<p><input type="text" name="demo-name" id="demo-name" class="demo-name-element" placeholder="お名前"></p>
	<p><input type="text" name="demo-email" id="demo-email" class="demo-email-element" placeholder="メールアドレス"></p>
	<p><input type="text" name="demo-pw" id="demo-pw" class="demo-pw-element" placeholder="パスワード"></p>
  <div><textarea title="Your Message" rows="5" cols="20" name="body" placeholder="メッセージ"></textarea></div>
</section>

CSS

#demo-sec input,
#demo-sec textarea{
	font-size:14px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo;
	border: 1px solid #B9C9CE;
	border-radius:5px;
	padding: 12px 0.8em;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

#demo-sec input{
	width:200px;
}
#demo-sec textarea{
	width:300px;
}
#demo-sec input[type=text]:focus,
#demo-sec textarea:focus {
  border-color:#83B6C2;
	outline:none;
	box-shadow:2px 2px 4px rgba(143,183,222,0.6),-2px -2px 4px rgba(143,183,222,0.6),inset 0 1px 2px rgba(0,0,0,0.2);
}
::-webkit-input-placeholder {
    color:#AFAFAF;
}
:-moz-placeholder {
    color:#AFAFAF;
}

ダウンロード

デザインに使用できるpngをダウンロードできます。 制作したアプリはfirewoksCS6です。

ライセンス

ご使用について
商用利用・個人利用（営利・非営利）ともに、フリーでご使用いただけます。
免責事項
データのダウンロード・ご使用によって生じた不利益・損害やいかなる問題について、一切責任を負いません。
禁止事項
二次配布（再配布）、素材の転売など。

参考サイト

Related Posts