box-shadowを利用すれば、影をつける事ができます。insetを使う事で影を内側に出来るようになります。今回はフォーム入力部分と送信ボタンに影をつける方法を書いてみます。

サンプルのhtml form部分

<form>
<input class="searcharea" type="text" name="name" id="is" value="">
<input class="submitarea" type="submit" value="検索">
</form>

入力フィールドのクラス名を.searcharea、送信ボタンのクラス名を.submitareaとしました。

スタイルシート

box-shadow:A B C D (E) inset;

Aはx方向へのずれを、Bはy方向へのずれを、Cはぼかしの強さを、Dではぼかし広がりを指定しています。Eで色の指定をしています。最後のinsetは枠の内側に影をつける設定となります。影を外側につけたい場合はinsetを削除してください。
box-shadowはCSS3、-webkit-box-shadowはchrome,safari用、-moz-box-shadowはfirefox用となります。
サンプルの色の指定はrgbaですが、html色指定の16進法(#000等)も使用できます。

それではsample1のスタイルシートを見ていきましょう。まずは影をつけてみます。

.searcharea,.submitarea {
-webkit-box-shadow:0 0 2px 2px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 2px 2px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 2px 2px rgba(200,200,200,0.2) inset; }

しかし、これだけですとsubmitボタンにカーソルを合わせたときにマウスボタンが変化しなくなってしまいます。次のcssを加えます。

.submitarea { cursor:pointer; }

枠の幅や高さ、色、背景色の設定も加えます。

/* input項目の幅・高さを調整 */
.searcharea { width:200px; height:16px; padding:5px 0 5px 5px; }
.submitarea { width:75px; height:28px; margin:0; padding:0 }
/* 背景色と枠の線色の設定 */
.searcharea { background-color:#FFF; border:#999 1px solid; }
.submitarea { background-color:#FFF; border:#999 1px solid; }

box_shadow_01

ぼかしの値の実験

ぼかしの強さや広がりの値を変えるとどうなるのでしょうか?
まずsample2でぼかしの強さを変えてみます。値を2pxから6pxに変更してみました。

.searcharea,.submitarea { 
-webkit-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset; }

box_shadow_02

次にsample2-1でぼかしの広がりを変えてみます。値を2pxから6pxに変更してみました。

.searcharea,.submitarea { 
-webkit-box-shadow:0 0 2px 6px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 2px 6px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 2px 6px rgba(200,200,200,0.2) inset; }

box_shadow_02_1

sample2-2ではぼかしの強さ、広がり共に6pxに変更してみました。

.searcharea,.submitarea {
-webkit-box-shadow:0 0 6px 6px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 6px 6px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 6px 6px rgba(200,200,200,0.2) inset; }

box_shadow_02_2

ボックスの上と左だけに影をつける

最後にsample3のcssを書いていきます。

.searcharea,.submitarea { 
-webkit-box-shadow:2px 2px 2px 0 rgba(200,200,200,0.2) inset;
   -moz-box-shadow:2px 2px 2px 0 rgba(200,200,200,0.2) inset;
        box-shadow:2px 2px 2px 0 rgba(200,200,200,0.2) inset; }

box_shadow_03