2

以下に示すように、プロパティを持つ背景画像を持つ通常のasp.netテキストボックスがあります。

.userbackground
{
    background-image: url('../images/user.png');
    background-repeat: no-repeat;
    background-position: fixed;
    text-align:center;
    width:16px;
    height:16px;
}

これは私のテキストボックスのビューです:

ここに画像の説明を入力

そして、ここに私のテキストボックスがあります:

 <asp:TextBox ID="UserName" runat="server" BorderStyle="Solid" BorderWidth="1px" 
 BorderColor="#0099CC" BackColor="#FAFFBD" MaxLength="0" 
 AutoCompleteType="Disabled" CssClass="userbackground"></asp:TextBox>

ここで、内側のテキストのマージンを設定するか、その画像の後にカーソル位置を配置する可能性があるかどうかを知りたいです。ユーザーがカーソル内のテキストをクリアすると、画像の前で停止する必要があります。

私はcssプロパティを使用してみました: text align:middle しかし、それは中央から始まり、それを望まず、背景画像を作成することも私のニーズに合わない.画像の表示と非表示も私の場合は良いオプションではありませんこれらの 3 つのオプション以外に、誰でも最適な方法を選択できます。

4

3 に答える 3

3

テキストボックスを でに配置divしbackground-image、テキストボックスをパディングで配置して、画像と重ならないようにすることができます。

​.textbox
{
 background-image:url('http://placehold.it/15/15');   
 background-repeat:no-repeat;
 background-position:3px 3px;
 border:solid 1px black;
 border-radius: 5px;
 padding-left:20px;
 width:200px;
}
.textbox input
{
 border:none;
 background:transparent;
 width:100%;     
 outline: none; //removes orange border in google chrome
}

-- デモを見る --

于 2012-04-17T11:21:43.530 に答える
2

これは、周囲の<div>要素がなくても実行できます。display:block;ただし、パディングを適用するには、入力をブロック要素として定義する必要があることに注意してください。

デモを見る

<input type="text" />

input
{
    background-image:url('http://placehold.it/15/15');   
    background-repeat:no-repeat;
    background-position:3px 3px;
    border:solid 1px black;
    border-radius: 5px;
    width:200px;
    height:22px;
    display:block;
    padding-left:20px;
    outline: none;
}
于 2012-04-17T11:28:34.103 に答える
1

あなたのスタイルで使用する必要がpadding-leftあります.plzチェックオンラインデモhttp://jsfiddle.net/SJBbs/1/。あなたの問題がまだ解決されていない場合は、コメントを残してください..

于 2012-04-17T11:22:54.403 に答える