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

示例：参见“文本框中的 图像”文本框中的图像

这就是它需要的样子：

4

1 回答 1

3

如果你想在你的 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 来执行帖子，它可能会更好。

于 2012-12-12T15:44:57.630 回答