iPentec.com / Doc / CSS / テキストボックス

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

画像を使って角の丸いテキストボックスを作成する方法を紹介します。

補足

CSSを利用し、背景画像を利用しない方法はこちらの記事を参照してください。

画像の準備

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

コード

スタイルシート

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

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) を左上とする画像、すなわち用意した画像の下半分を背景として表示します。