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

2012.11.17

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

サンプル

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

HTML

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

CSS

#demo-sec input,
#demo-sec textarea{
	font-size:14px;
	font-family: &#039;ヒラギノ角ゴ Pro W3&#039;, &#039;Hiragino Kaku Gothic Pro&#039;, &#039;Hiragino Kaku Gothic ProN&#039;, &#039;メイリオ&#039;, 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です。~~

ライセンス

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

参考サイト

HTML5のplaceholder属性で、表示される文字色を変更する方法 | howtohp

Related Posts