デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編

CSSで作るWeb用パーツ（5）

立体感のある検索ボックス

　次のサンプルでは、図4のような立体感のある検索ボックスをスタイリングしてみましょう。

図4　立体感のある検索ボックス（sample02.html）

　入力欄のフォーカス時には背景がハイライト表示され、ボタンにカーソルが乗ると凹んだようなデザインになります。

図5　フォーカス時、ホバー時のスタイル（sample02.html）

HTML5でマークアップ

　先ほどと同じくHTML5で書いたシンプルなコードですが、2つ目のinput要素のtype属性の値はsubmitとなっています。

リスト5　立体感のある検索ボックス／HTML（sample02.html）

<form>
<input type="search" class="text">
<input type="submit" value="検索">
</form>

positionプロパティで配置する

　先のサンプルと同じように絶対配置しますが、その前に、幅、パディング、ボーダーを指定して、左からの距離を計算しておきましょう。今回も入力欄の右とボタンの左をぴったり合わせるので、入力欄の右ボーダーはなくしておきます。ボタンの左からの距離は、入力欄の幅200px+左パディング10px+右パディング10px+左ボーダー1px=221pxです。

リスト6　パディングやボーダー幅を指定して絶対配置する／CSS（sample02a.html）

form {
  position: relative;
}
input[type="search"] {
  width: 200px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #cc9900;
  border-right: 0; /* 右ボーダーなし */
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
}
input[type="submit"] {
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid #cc9900;
  position: absolute;
  top: 0;
  left: 221px;
}

　これで入力欄の右側とボタンの左側をぴったり合わせることができるはずですが、Firefoxで表示すると図6のようにボタンの高さがずれてしまいます。Firefoxには::-moz-focus-innerという独自の擬似要素があり、四方に1pxの点線と左右に2pxのパディングが設定されているためです。

図6　Firefoxでの表示（sample02a.html）

　次のように指定すると、Firefoxでも高さを揃えることができます。

リスト7　Firefoxのボーダーとパディングをリセット／CSS（sample02b.html）

input::-moz-focus-inner { /* Firefoxのボーダーとパディングをリセット */
  border: 0;
  padding: 0;
}

図7　Firefoxでの表示（sample02b.html）

検索テキスト入力欄とボタンのスタイリング

　配置ができたので、入力欄を装飾していきましょう。border-radiusで左上と左下に角丸を指定、box-shadowでくすんだオレンジ色（#cc9966）のシャドウを内側に指定します。

リスト8　検索テキスト入力欄のスタイル／CSS（sample02.html）

input[type="search"] {
～中略～
  border-radius: 5px 0 0 5px; /* 左上と左下に半径5pxの角丸 */
  box-shadow: 0 0 5px #cc9966 inset; /* ボックスの内側にシャドウ */
}

ボタンのスタイリング

　続いてボタンの装飾です。背景は、linear-gradientプロパティで、上から下方向に濃いオレンジ（#ffcc99）から薄いオレンジ（#ff9900）のグラデーションを指定します。

　ボタンの中のテキストはやや文字間隔が詰まっているように感じるので、letter-spacingプロパティで文字間隔を調整します。ここでは10pxを指定しましたが、テキストの右側にも10pxの余白ができてしまうので、右パディングで調整します。

　box-shadowで内側にハイライトとシャドウを付け、さらにtext-shadowでテキストに影を付けてあげると、よりリッチな表現になります。

リスト9　ボタンのスタイリング／CSS（sample02.html）

input[type="submit"] {
  ～中略～
  font-weight: bold;
  letter-spacing: 10px; /* 文字間隔（10px追加） */
  padding: 10px 10px 10px 20px; /* 右パディングをletter-spacing分差し引く */
  background: linear-gradient(#ffcc99, #ff9900); /* グラデーション */
  color: #ffffff;
  border-radius: 0 5px 5px 0; /* 右上と右下に半径5pxの角丸 */
  box-shadow: 1px 1px 1px 0 #ffffcc inset, -1px -1px 3px 0 #ff9900 inset; /* ボックスの内側にハイライトとシャドウ */
  cursor: pointer; /* リンクカーソル */
  text-shadow: 0 -1px 0 #cc9900; /* テキストの上方向に1pxの影を付ける */
}

フォーカス時とホバー時のスタイルを指定

　最後に、入力欄のフォーカス時とボタンのホバー時のスタイルを指定して完成です。ボタンのグラデーションやシャドウ、ハイライトはデフォルト時と逆の向きになるよう指定すると凹んだ表現になります。なお、図8のブルーのアウトラインのように一部のブラウザではフォーカス時やアクティブ時にアウトラインが表示されます。outline:none;でアウトラインをリセットできます。

図8　Chromeでの表示（sample02c.html）

リスト10　フォーカス時とホバー時のスタイル／CSS（sample02.html）

input[type="search"]:focus {
  background-color: #ffffe0;
}
input[type="submit"]:hover {
  background: linear-gradient(#ff9900, #ffcc99); /* グラデーション */
  box-shadow: -1px -1px 1px 0 #ffffcc inset, 1px 1px 3px 0 #ff9900 inset; /* ボックスの内側にハイライトとシャドウ */
}
input {
  outline: none; /* アウトラインをリセット */
}