[使えるCSSテクニックVol.2] CSS を使った見栄えの良いフォーム パート 2

■背景画像を使った例

まずは背景に画像を使用した例です。
CSS の指定は単純に input タグのワクを消して背景に乗っけただけ。画像を入れ替えれば簡単にガラリと印象の違うフォームを作れます。

XHTML

<form>
<ul>
<li><input type="text"/></li>
<li><input type="text" /></li>
<li><input type="text" /></li>
</ul>
<p><button><img src="ex01_btn.gif" alt="" width="63" height="17" /></button></p>
</form>

CSS

form {
	background: url(ex01_back.gif) no-repeat 0 0;
}
ul {
	padding: 10px 90px;
}
ul li {
	line-height: 200%;
	padding: 0 0 7px;
}
ul li input {
	width: 200px;
	border: none;
	border-bottom: 2px #E7E7E7 solid;
}
p {
	margin: 0 0 0 280px;
	padding: 0 0 5px;
}

■fieldset・legendを使った例

ふだんあまりお目にかからない(?) fieldset タグを使った例です。
複数のコントロールをグループ化する要素ですが、legend タグと組み合わせてフォームを見やすく区別するコトができます。

XHTML

<form>
<fieldset id="blueField">
<legend>おといあわせ 1</legend> 
<dl>
<dt>おなまえ：</dt>
<dd><input type="text" id="name" /></dd>
<dt>ないよう：</dt>
<dd><textarea></textarea></dd>
</dl>
<p><button>おくる</button></p>
</fieldset>
<fieldset id="redField">
<legend>おといあわせ 2</legend> 
<dl>
<dt>おなまえ：</dt>
<dd><input type="text" /></dd>
<dt>ないよう：</dt>
<dd><textarea></textarea></dd>
</dl>
<p><button>おくる</button></p>
</fieldset>
</form>

CSS(フォームまわりのみ)

/* 共用設定*/
fieldset {
	margin: 0 0 20px;
	padding: 0;
}
legend {
	margin: 0 0 0 20px;
	padding: 5px 10px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 120%;
	border: 1px #FFFFFF solid;
}
input,
textarea {
	width: 300px;
	border-width: 2px;
	border-style: solid;
}
button {
	padding: 5px 20px;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
}

/* 青設定*/
fieldset#blueField {
	border: 1px #079BFF solid;
	border-top: 13px #079BFF solid;
}
fieldset#blueField legend {
	background: #079BFF;
}
fieldset#blueField input {
	border-color: #52B9FF;
	background: #DFECFC;
}
fieldset#blueField textarea {
	border-color: #52B9FF;
	background: #DFECFC;
}
fieldset#blueField button {
	background: #52B9FF;
}

/* 赤設定*/
fieldset#redField {
	border: 1px #FE0000 solid;
	border-top: 13px #FE0000 solid;
}
fieldset#redField legend {
	background: #FE0000;
}
fieldset#redField input {
	border-color: #FF6A6A;
	background: #FFD0D0;
}
fieldset#redField textarea {
	border-color: #FF6A6A;
	background: #FFD0D0;
}
fieldset#redField button {
	background: #FF6A6A;
}

■疑似クラスと属性セレクタを使った例

疑似クラスの focus を使用して、入力時だけフィールド枠の表示を切り替えます。
簡単な CSS の指定で、少しだけ親切なフォームになります。
※ 擬似クラス「focus」は IE では動作しません。

また、属性セレクタを使ってinputタグの切り分けもしています。

XHTML

<form>
<p><input type="text" /><p>
<p id="searchButton"><input type="image" src="ex03_btn.gif" /></p>
<span class="clear"></span>
</form>

CSS

form {
	background: url(ex03_back.gif) no-repeat 0 0;
}
p {
	float: left;
}
input {
	width: 257px;
	margin: 7px 15px 0 35px;
	border: none;
	background: #F5F3DC;
}
input:focus {
	color: #3366FF;
	font-weight: bold;
	background: #CCCCCC;
}
input[type="image"] {
	width: 64px;
	margin: 0;
}