css - 入力フィールドを透明にする

Question

標準入力フィールドを取り、見栄えを良くしたかったのです。したがって、この画像をページの入力フィールドとして使用します。

私のページで使用するには、次のコードを使用します。

HTML:

<input type="text" class="inputstyle" />

CSS

.inputstyle {
padding:7px 10px 5px 10px;
width:251px;
height: 38px;
background: url('images/form_smaller.png') no-repeat 0 center;
border:0;
font-size:14px;
}

入力フィールドが白い背景にある場合、これは問題になりません。しかし、明るい緑色の背景に入力フィールドがあり、入力フィールドは次のようになります。

私の質問は、元の入力フィールドの角を削除して見栄えを良くするにはどうすればよいですか?

Answer 1

実際の質問に答えるには、画像を透明な gif または png にするだけです。背景レイヤーを削除し、入力に背景があることを確認し、[ファイル] > [Web およびデバイス用に保存] を使用して保存するだけです。

ただし、入力を背景画像に置き換えることはお勧めしません。単純な境界半径は、最新のすべてのブラウザーで機能します。