テキストボックス(input)プロンプトアイコンと修飾効果を追加

転載先:http://www.codebit.cn/pub/html/xhtml_css/tip/input_background_image/あなたのテキストボックスに用途を説明する小さなアイコンを追加します

input.txtInput {
background: fff;
background-repeat: no-repeat;
background-position: 2px center;
border:1px solid 999;
padding:2px 2px 2px 20px;
}
input.searchInput {background-image: url(search.gif);}
input.commentInput {background-image: url(comments.gif);}

上のコードのinput.txtInputは、テキストボックスに小さなアイコンがある汎用スタイルを定義しています.paddingの4番目の値は、テキストの内容を20画素から定義することです.なぜなら、本明細書の画像は16画素サイズで、文字の周りに2画素の余白があるからです.具体的には、あなたの画像の大きさによって決める必要があります.そして、searchInputを定義しました  およびcommentInput  2つのテキストボックススタイルで、それぞれ2つの異なる小さなアイコンが設定されています.これにより、テキストボックスのclassを設定するときに、次のように書くことができます.

<p>
<label for="keyword">  ：</label>
<input type="text" name="keyword" id="keyword" class="txtInput searchInput" />
</p>
<p>
<label for="comment">  ：</label>
<input type="text" name="comment" id="comment" class="txtInput commentInput" />
</p> 

テキストボックスに柔らかい枠線を追加します

input.borderInput {
background-image: url(border.gif);;
background-repeat: no-repeat;
background-position: left top;
border:1px solid d5dee9;
padding:3px;
} 

上のコードは背景図を設定し、左上に位置合わせします.もちろん、この画像は通常幅が広く、高さが高く、グラデーションの色に近いborderを設定します.はい、効果の柔らかいフレームが実現しました. border.gif:よく見えません^^;
//----------------------------------
//--------------------------------