iPentec.com / Document / カテゴリ: HTML / タグ: CSS テキストボックス

角の丸いテキストボックスを作成する (画像を利用)

画像の準備

テキストボックスの画像を用意します。今回は下図の画像を用いました。横140px、縦40pxです。テキストボックスのフォーカス時と非フォーカス時の画像をつなげて1枚の画像として用意します。(上が非フォーカス時、下がフォーカス時の画像です。)

back.png 140×40 - 角の丸いテキストボックスを作成する (画像を利用):画像1 — back.png 140×40

コード

スタイルシート

以下のスタイルシートを用意します。

image-rounded-textbox.css

#inputBox {
  margin: 0px 0px 0px 0px;
  padding: 0px 00px 0px 10px;
  width: 130px;
  height: 20px;
  background-color: white;
  border: none;
  outline: none;
  background: url(back.png) 0 0 no-repeat;
  color: #FFFFFF;
}

#inputBox:focus {
  background-position: 0 100%;
  color: #000000;
}

HTML

以下のHTMLファイルを用意します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="image-rounded-textbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form action="" method="post">
    <input id="inputBox" type="text" />
  </form>
</body>
</html>

解説

テキストボックスの widthプロパティの値は、画像の幅 - PaddingLeft - paddingRight とします。
枠は画像で表現するため、border:none;を指定しテキストボックスの枠は非表示にします。
background:urlで背景に画像を設定しています。フォーカスを受け取った時のスタイルは #inputBox:focus で定義しています。 background-position:0 100%;を設定すると、inputBoxのスタイルで height: 20px;が指定されているため、フォーカスを受け取った場合の表示画像は画像の (x,y)=(0,20) を左上とする画像、すなわち用意した画像の下半分を背景として表示します。