1

この複数行のテキストボックスがあります。テキストボックスの左上にImageButtonを追加したいと思います。

私はいくつかの方法を見ましたが、どれもあまり役に立たなかったようです。

その複数行のテキストボックスにImageButtonを追加するための最良の解決策は何ですか？

コードは次のとおりです。

HTML：

<p>
    <asp:TextBox ID="txtDescription" Width="98%" Height="300px" style="overflow:auto" BorderStyle="Outset" BorderWidth="2px"
            runat="server" Visible="false" TextMode="MultiLine" ReadOnly="true" ></asp:TextBox>
</p>

コードビハインド：

protected void SetTextBox(int levelID)
{
    switch (levelID)
    {
        case 1: // = not started yet
            txtDescription.CssClass = "textBoxWhite";                
            break;
        case 2: //= in proccess
            txtDescription.CssClass = "textBoxBlue";
            break;
        case 3: //= completed
            txtDescription.CssClass = "textBoxRed";
            break;
    }
}

CSS：

.textBoxRed 
 { 

       background: rgba(255, 181, 181, 0.5);
 }

 .textBoxBlue 
 { 
      background: rgba(181, 181, 255, 0.5);
 }

 .textBoxWhite
 {
      background: rgba(255, 255, 255, 0.5);
 }

例：「textBox内の 画像textbox内の画像」を参照してください

これはそれがどのように見える必要があるかです：

4

1 に答える 1

3

テキストエリア内に画像を入れたい場合は、次のようにすることができます。

HTML

<div>
    <asp:TextBox ID="txtDescription" CssClass="nice-input" ...></asp:TextBox>
</div>

CSS

.nice-input
{
    background:#FFFFFF url('http://www.cssportal.com/form-elements/images/search.png') no-repeat 4px 4px;
    padding:25px 4px 4px 4px;
    border:1px solid #CCCCCC;
    width:98%;
    height:300px;
}​

画像の送信ボタンが必要な場合は、次のようにすることができます

HTML

<div>
    <asp:ImageButton ID="ClickMeButton" CssClass="nice-button" ...></asp:TextBox>
    <asp:TextBox ID="txtDescription" CssClass="nice-input" ...></asp:TextBox>
</div>

CSS

.nice-input
{
    padding:25px 4px 4px 4px;
    border:1px solid #CCCCCC;
    width:98%;
    height:300px;
}

.nice-button
{
    background:#FFFFFF url('http://www.cssportal.com/form-elements/images/search.png') no-repeat 0px 0px;
    position:relative;
    top:24px;
    left:4px;
}​

注2番目の解決策は非常にハックです。asp：ImageButtonの代わりにjQueryを使用して投稿を実行できる場合は、はるかに優れている可能性があります。

于 2012-12-12T15:44:57.630 に答える