更改 TextBox 控件的外观答案

【问题标题】：Change look of TextBox control更改 TextBox 控件的外观
【发布时间】：2013-10-02 19:01:46
【问题描述】：

有没有办法可以将TextBox 的外观从其默认外观更改为如下所示

我搜索了creating a custom TextBox，但没有看到任何关于更改外观的内容。

我有 PSD 中的图像我只是不知道是否有办法用这个图像替换默认外观

我是制作网站的新手，只是将其用于学习目的，所以我真的不知道从哪里开始

【问题讨论】：

不是自定义文本框，而是检查文本框的样式。
如果您要编写 Web 应用程序，您将需要学习基本的 CSS。您通过 CSS 将样式应用于您的网页，以控制网页的几乎任何视觉方面。然后你可以搜索 CSS ROUNDED CORNERS 并且你会了解如何应用边框半径

标签： asp.net textbox asp.net-customcontrol

【解决方案1】：

您应该使用 CSS 来实现这一点。你需要做的就是设计它的样式。 Here 是一些很好的例子，可以帮助你。

这是显示如何添加背景图像的一个：

.tb11 {
    background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    border:1px solid #CCCCCC;
    width:230px;
    height:18px;
}

【讨论】：

【解决方案2】：

您可以创建自定义 asp.net 文本框控件，并使用必要的 html（标签或跨度）和 css 包装 oob asp.net 文本框，以按照您想要的方式对其进行样式设置。该控件将变得可重复使用，您可以在任何页面上使用它。

【讨论】：

【解决方案3】：

如果您想要一种简单的方法，只需加载易于使用的引导框架并将所需的文件包含到您的项目中即可。

不仅仅是将正确的类添加到您的控件中，它就是这样！

此外，文档非常完整和简单

http://getbootstrap.com/components/#input-groups

【讨论】：

【解决方案4】：

asp.net TextBox 实际上只是一个带有type="text" 的input。

你可以使用样式表来做这样的事情：

CSS：

input[type=text].styled1
{
    background: url(http://myUrl.com/Username.jpg);
    border:0;
    color: gray;
    height: 23px;
    padding-left:10px;
    width: 200px;
}

XHTML：

<asp:Textbox id="txtUsername" runat="server" CssClass="styled1" />

【讨论】：