乱雑モックアップ   らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。

inputの見栄えに気を使う練習。

手始めにこんな感じの詮索窓をつくってみる。

練習ページ>input type=”search”とplaceholder

気になった点

• 表示サイズを変更すると色々ズレる、inputにfloatを使ったりheightを固定したりしないと解決出来なかった。もっと上手い方法があるのではないか？
• HTML5で追加されたtype=”search”でマークアップしてみたのを忘れていて、webkitでinputがリセットできないなぁと途方に暮れた。
• はやいところwebkit以外もplaceholderに対応してくれたらいいのに。

webkitだとtype=”search”のborderとbackground-imageが設定出来ない？

<form>
<input type="text" placeholder="サイト内検索" />
<input type="submit" value="検索" />
</form>

input {
	float:left;
}
/* -- clear ------------------------- */
form {
/zoom : 1;
}
form:after {
	content : '';
	display : block;
	clear : both;
}
dl {
	margin-bottom:2em;
}
/* -- sample1 ------------------------- */
#sample1 input[type="search"],
#sample1 input[type="text"] {
	border:1px solid #333;
	width:200px;
	height:25px;
	padding:0 0 0 0.5em;
	-moz-border-radius:3px 0 0 3px;
	-webkit-border-bottom-left-radius:3px;
	-webkit-border-top-left-radius:3px;
	background:-moz-linear-gradient(top, #e8e8e8, #fff);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(1, #fff));
}
#sample2 input[type="search"],
#sample2 input[type="text"] {
	width:230px;
	height:25px;
	border:1px solid #333;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	padding:0 0 0 0.5em;
}
/* -- submit ------------------------- */
#sample1 input[type="submit"],
#sample2 input[type="submit"] {
	border:0;
	width:30px;
	height:27px;
	text-indent:-7777px;
	display:block;
}
#sample1 input[type="submit"] {
	background:url(../img/search-1.png) no-repeat;
}
#sample2 input[type="submit"] {
	background:url(../img/search-3.png) no-repeat;
	margin-left:-30px;
}
#sample1 input[type="submit"]:hover,
#sample2 input[type="submit"]:hover {
	background-position:0px -27px;
}
#sample1 input[type="submit"]:active,
#sample2 input[type="submit"]:active {
	background-position:0px -54px;
}

[追記 / 20100418]
:visited の挙動が変更に。制作への影響は？ | Web標準Blog | ミツエーリンクス

:visitedに指定できるプロパティが color, background-color, border-*-color, outline-color, column-rule-color といった色指定に限定されることでしょうか。どういうことかというと、:visitedに指定されたbackground-image などが効かなくなります（:link と同じものが適用されるようになります）。

同じ対策がWebKitでも行われていることから、将来的にSafariやChromeでも同様の変更が反映されるようになりそうです。

今回のはvisitedを使ってないけど、訪問済みのチェックボックスなんかをvisitedで変更してる人は注意が必要かもですね。
あぶないあぶない。