HOME > 開発者向けBLOG > Webデザイン >  input type textに角丸背景の画像を表示

Technology Note 開発者向けBLOG

Webデザイン

input type textに角丸背景の画像を表示

こんにちは、ゼノフィ渡部です。

input type textに対して、任意で幅を変更できる角丸背景の画像を表示する方法をご紹介いたします。

まず、inputのスタイルをリセットするプロパティを指定します。

「-webkit-appearance: none;」、「-webkit-border-radius: 0;」はスマートフォン用に記述しています。

1
2
3
4
5
6
7
8
9

input {
  outline: none;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
}

任意で幅を変更できるようにするために、背景画像に指定する幅とinput type text自体に幅を指定するクラスを用意します。比較するために背景用、input type text用にそれぞれ二つのクラスを用意しました。「.box_width01」、「.box_width02」が背景画像用、「.text_width01」、「text_width02」がinput type text用のクラスになります。

input用の幅が背景画像用の幅より20px小さくなっていますが、これはinputにテキストが入力された時の左右のパディングを調整した分の値を引いています。実際の記述は下段のCSSサンプルの13行目の「padding: 12px 10px(左右);」にあたります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box_width01 {
  width: 300px;
}
 
.box_width02 {
  width: 500px;
}
 
.text_width01 {
  width: 280px;
}
 
.text_width02 {
  width: 480px;
}

1行目～5行目では「.middle」とその中のdivの画像の高さを指定し、「display: inline-block;」プロパティでdivを横並びにしています。7行目の「.middle」では横に中央の画像が伸びる用に繰り返しています。11行目の「.middle input」は「.middle」内のinput要素の高さと文字が入力される際にテキストが表示される左右のパディングを調整しています。

16行目の「.left_corner 」は左側の角丸画像を「.right_corner」で右側の角丸画像を表示しています。

24行目から34行目はIE6とIE7が「display: inline-block;」プロパティに対応していないので、CSSハックで対応しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.middle,
.middle div {
  height: 39px;
  display: inline-block;
}
 
.middle {
  background: url(img_bg_middle.gif) repeat-x;
}
 
.middle input {
  height: 15px;
  padding: 12px 10px;
}
 
.left_corner {
  background: url(img_bg_left_corner.gif) no-repeat left top;
}
 
.right_corner {
  background: url(img_bg_right_corner.gif) no-repeat right top;
}
 
/* IE6 */
.middle,
.middle div {
  _display: inline;
}
 
/* IE7 */
*:first-child+html .middle,
*:first-child+html .middle div {
  display: inline;
}

サンプルを見ると幅が異なる二つのinput type textが表示されています。背景とinput type textの幅を調節することによって、横幅が違う角丸のinput type textを表示させることができます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

input {
  outline: none;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
}
 
.box_width01 {
  width: 300px;
}
 
.box_width02 {
  width: 500px;
}
 
.text_width01 {
  width: 280px;
}
 
.text_width02 {
  width: 480px;
}
 
.middle,
.middle div {
  height: 39px;
  display: inline-block;
}
 
.middle {
  background: url(img_bg_middle.gif) repeat-x;
}
 
.middle input {
  height: 15px;
  padding: 12px 10px;
}
 
.left_corner {
  background: url(img_bg_left_corner.gif) no-repeat left top;
}
 
.right_corner {
  background: url(img_bg_right_corner.gif) no-repeat right top;
}
 
/* IE6 */
.middle,
.middle div {
  _display: inline;
}
 
/* IE7 */
*:first-child+html .middle,
*:first-child+html .middle div {
  display: inline;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<p>
    幅300px
</p>
<div class="middle box_width01">
    <div class="left_corner">
        <div class="right_corner">
            <input type="text" name="text" value="" maxlength="100" class="text_width01" />
        </div>
    </div>
</div>
 
<p>
    幅500px
</p>
<div class="middle box_width02">
    <div class="left_corner">
        <div class="right_corner">
            <input type="text" name="text" value="" maxlength="100" class="text_width02" />
        </div>
    </div>
</div>

<

>

PAGETOP