[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル

CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。

How To Create Pretty Search Forms

[ad#ad-2]

• デモ
• 実装

デモ

デモでは3種類のカラーを使ったそれぞれ2つのフォームがあります。

デモページ

実装

HTML

デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。

<div class="lighter">
<form>
    <span><input type="text" class="search rounded" placeholder="Search..."></span>
    <span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>
<div class="dark">
<form>
    <span><input type="text" class="search rounded" placeholder="Search..."></span>
    <span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>
<div class="light">
<form>
    <span><input type="text" class="search rounded" placeholder="Search..."></span>
    <span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>

CSS

検索フォームのベースとなるスタイルです。
検索フォーム内の虫眼鏡のアイコンは画像（search.png）です。

form{
    width:500px;
    margin:0 auto;
}
.search {
    padding:6px 15px 6px 30px;
    margin:3px;
    background: url('./images/search.png') no-repeat 8px 6px;
}

一つ目の検索フォームに、角丸を設定します。

.rounded {
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}

フォーム内のフォントカラーを設定します。

input[type=text]{
    color:#bcbcbc;
}

二つ目の検索フォームのボタンはCSS3グラデーションを設定します。

input[type=button], input[type=button]:hover {
    position:relative;
    left:-6px;
    border:1px solid #adc5cf;
    background: #e4f1f9; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
    background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
    color:#7da2aa;
    cursor: pointer;
}

[ad#ad-2]

3種類の各フォームは背景とカラーが異なります。
各フォームのキャプチャと共に紹介します。

デモページ：Lighter Search Form

.lighter{
    background: url('./images/lighter_grey.jpg');
}
.lighter input[type=text]{
    border:1px solid #d0d0d0;
    background-color:#fcfcfc;
}

デモページ：Light Search Form

.light{
    background: url('./images/light_grey.jpg');
}
.light input[type=text]{
    border:1px solid #acb1b7;
    background-color:#fcfcfc;
}

デモページ：Dark Search Form

.dark{
    background: url('./images/dark_grey.jpg');
}
.dark input[type=text]{
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#505358;
}