角丸の入力フォームを作るにはいくつかの方法がある。
通常入力フォームは
と、こんなふうに角が直角である。
このテキスト入力フォームの角を角丸に変え、見映えよくしてみます。
(1)画像を使ってテキスト入力フォームを角丸にする方法
(A) inputの外側に画像背景を置く方法
[手順]
まず角丸の画像を用意します。なお、この画像の縦幅はinputの縦幅よりも大きい方が調整がしやすい。
その画像をinputの外側のボックス背景として使用し、ボックス内にinputを配置。inputの枠線を消せばとりあえずOK。
<style type="text/css">
#sample {
width:300px;
height:35px;
background-image:url(image/kadomaru.gif);
background-repeat:no-repeat;
}
#sample input{
width:240px;
height:20px;
margin:5px 0;
padding-top:4px;
padding-left:1em;
font-size:16px;
border-width:0;
border-style:none;
background:transparent;
}
</style>
<div id="sample">
<input type=text name=hoge value="お名前をご記入ください。" size="38" />
</div>
注意したいのはボックス内の縦中央にinputを配置することです。そしてinput内の文字の縦位置が中央からずれないようにinputの縦幅と文字の大きさを調整する必要があります。
(B) 1枚画像を使ってinputの内側の背景に角丸画像を使用する方法
これは先ほどとは逆にinput自身の背景に角丸画像を使用する方法です。
[手順]
input.sm2{
margin:0;
width:243px;
height:26px;
padding-left:1em;
padding-top:8px; /*firefoxでは有効ですがoperaではずれます*/
font-size:16px;
border-width:0;
border-style:none;
background-image:url(image/kadomaru.gif);
background-repeat:no-repeat;
}
<p>
<input type=text name=hoge value="お名前をご記入ください。" size="38" class="sm2" />
<p>
このやり方は調整が結構面倒で、お勧めできません。
operaでの文字の縦位置のズレが出ます。operaを気にしないのであれば十分この方法も使えます。
CSS3でつくる角丸画像
CSS3では画像を使わないで角丸フォームが簡単に作れます。
しかし、CSS3はIEを除くモダンブラウザでは対応していますが、実際のユーザーの利用環境は依然としてIE6、IE7が大半を占めており、現実的な対応策とはいえないのが現状です。
input{
border:1px solid #525252; /* 枠線の装飾 */
background-color: #fff; /* 背景色 */
border-radius: 20px; /* CSS3 */
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
このCSS3をつかった方法はIEやOPERAでは非対応です。
IEでは「border-radius.htc」というファイルをダウンロードして、CSSに一行追加すれば実現できます。
input{
border:1px solid #525252; /* 枠線の装飾 */
background-color: #fff; /* 背景色 */
border-radius: 20px; /* CSS3 */
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
behavior: url(border-radius.htc); /*for IE ← この１行を追加*/
この場合、CSSは外部ファイルにしておき、CSSファイルと同じフォルダ内に
border-radius.htcを入れておきます。
border-radius.htcのダウンロード先 → CSS curved corner
※上記デモではCSS３を使った角丸においてはIE非対応です。
