ASP.NET 4.8中如何隐藏无值asp:TextBox的日期掩码

针对你遇到的ASP.NET 4.8里<asp:TextBox TextMode="Date">无值状态下显示掩码（如yyyy-mm-dd）且常规CSS方案无效的问题，可通过以下两种方式解决：

一、精准CSS选择器+浏览器兼容样式 #

由于ASP.NET会给服务器控件生成带前缀的ID（如ctl00_ContentPlaceHolder1_dateTB0），常规选择器可能无法匹配，需用属性包含选择器精准定位目标控件，同时针对不同浏览器做兼容处理：

/* Chrome、Edge等WebKit内核浏览器 */
input[type="date"][id*="dateTB0"]:not(:has-value)::-webkit-datetime-edit {
    color: transparent;
}
/* 聚焦时恢复文本颜色，方便用户操作 */
input[type="date"][id*="dateTB0"]:not(:has-value):focus::-webkit-datetime-edit {
    color: initial;
}

/* Firefox浏览器 */
input[type="date"][id*="dateTB0"]:not(:valid) {
    color: transparent;
}
input[type="date"][id*="dateTB0"]:not(:valid):focus {
    color: initial;
}

说明：[id*="dateTB0"]表示ID中包含dateTB0的元素，可确保匹配到ASP.NET生成的目标input控件。如果CSS仍不生效，可尝试添加!important强制覆盖默认样式（仅应急使用，不推荐长期依赖）。

二、服务器端动态控制TextMode #

在后台代码中根据TextBox是否有值，动态切换TextMode属性：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始无值时，设置为普通文本框
        dateTB0.TextMode = TextBoxMode.SingleLine;
    }
}

// 当赋值或用户选择日期后，切换为Date模式
public void SetDateValue(string dateValue)
{
    if (!string.IsNullOrEmpty(dateValue))
    {
        dateTB0.Text = dateValue;
        dateTB0.TextMode = TextBoxMode.Date;
    }
}

这种方式通过服务器端逻辑避免初始状态下显示date控件的掩码，适合对客户端样式控制有顾虑的场景。

内容的提问来源于stack exchange，提问作者Petronius