CSSを利用し、背景画像を利用しない方法はこちらの記事を参照してください。
画像を使って角の丸いテキストボックスを作成する方法を紹介します。
テキストボックスの画像を用意します。今回は下図の画像を用いました。横140px、縦40pxです。テキストボックスのフォーカス時と非フォーカス時の画像をつなげて1枚の画像として用意します。(上が非フォーカス時、下がフォーカス時の画像です。)
以下のスタイルシートを用意します。
#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ファイルを用意します。
<!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) を左上とする画像、すなわち用意した画像の下半分を背景として表示します。
上記のHTMLをWebブラウザで表示すると下図の画面が表示されます。
青いテキストボックスをクリックすると色が変わり下図の状態に変わります。
テキストボックスのため文字の入力もできます。
別の場所をクリックしフォーカスを失うと、下図の状態に変わります。
