Question

我有这个多行文本框。我想在文本框的左上角添加一个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中的图像” Image in textbox

This is how it needs to look like:

Answer 1

如果您想在textarea中添加图片，您可以执行以下操作：

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;
}

注意第二种解决方案是非常hackish。如果你可以使用jQuery来执行帖子而不是你的asp：ImageButton它可以更好。

如何在TextBox中设置ImageButton

1 个答案: