ASP.NET 4.0实现TextBox浮动占位符的简易方法咨询

不用复杂的JavaScript或框架，纯CSS结合简单的结构调整就能实现这个效果，步骤如下：

1. 修改ASP.NET控件结构 #

给每个TextBox外面套一个容器，同时添加一个<label>标签作为模拟的占位符（注意通过ClientID绑定输入框，避免ASP.NET自动生成ID导致失效）：

<form id="form1" runat="server">
    <table class="w-100">
        <tr>
            <td>
                <div class="floating-input-container">
                    <asp:TextBox ID="floatingInput" runat="server" class="floating-input" TextMode="SingleLine"></asp:TextBox>
                    <label for="<%= floatingInput.ClientID %>" class="floating-label">Email</label>
                </div>
            </td>
         </tr>
         <tr>
            <td>
                <div class="floating-input-container">
                    <asp:TextBox ID="floatingPassword" runat="server" class="floating-input" TextMode="Password"></asp:TextBox>
                    <label for="<%= floatingPassword.ClientID %>" class="floating-label">Password</label>
                </div>
            </td>
         </tr>
     </table>
</form>

2. 添加CSS样式 #

把这段CSS代码放到页面的<style>标签里，或者你的外部CSS文件中：

/* 容器：提供相对定位，让标签可以基于它定位 */
.floating-input-container {
    position: relative;
    margin-bottom: 1.5rem;
}

/* 输入框：调整内边距，留出标签位置 */
.floating-input {
    width: 100%;
    padding: 0.75rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    background-color: transparent;
}

/* 输入框焦点样式：替换默认轮廓，保持和Bootstrap风格一致 */
.floating-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* 模拟占位符的标签：初始状态和输入框文本重叠 */
.floating-label {
    position: absolute;
    top: 0.75rem;
    left: 0.5rem;
    color: #6c757d;
    transition: all 0.2s ease;
    pointer-events: none; /* 点击标签直接聚焦输入框 */
    background-color: white; /* 覆盖输入框边框，避免文字重叠 */
    padding: 0 0.25rem;
}

/* 输入框有内容或聚焦时，标签上移变小 */
.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
    top: -0.5rem;
    left: 0.5rem;
    font-size: 0.875rem;
    color: #0d6efd;
}

原理说明 #

原生的placeholder属性无法实现上移效果，所以我们用<label>模拟占位符，通过CSS的兄弟选择器和过渡动画，在输入框获得焦点或者有内容时，改变标签的位置和大小，实现你要的占位符上移效果。

这个方案不需要复杂的技术，代码直接粘贴就能用，适配你现有的ASP.NET结构。

内容的提问来源于stack exchange，提问作者Beyza Nur Karakaya