Blazor结合Bootstrap 5 Floating labels浮动标签使用异常问题

问题场景 #

将Blazor项目迁移到Bootstrap 5后，希望将Floating labels（浮动标签）功能和标准Blazor组件<InputNumber @bind-Value="FooModel.FooValue" />搭配使用，初始编写代码如下：

<div class="form-floating">
    <InputNumber type="number" class="form-control" id="floatingInput" placeholder="请输入数值" @bind-Value="FooModel.FooValue" />
    <label for="floatingInput">Test blazor</label>
</div>

运行后浮动标签功能未正常生效。

问题根源 #

Bootstrap浮动标签的生效逻辑依赖input控件无初始值、且placeholder属性不为空的前提，当input存在初始值时，标签会直接保持浮动状态，不会展示默认的占位效果。
该问题核心是FooModel.FooValue为非可空int类型，值类型的默认初始值为0，InputNumber组件渲染时会默认把0填充到input的value属性中，导致Bootstrap判断控件已存在内容，浮动标签效果不符合预期。

解决方案 #

方案1：修改模型属性为可空值类型（推荐） #

将FooModel中的FooValue属性定义改为可空int类型，初始值为null，InputNumber渲染时不会填充默认值，浮动标签即可正常工作：

// 修改前
// public int FooValue { get; set; }
// 修改后
public int? FooValue { get; set; }

该方案无需修改原有razor视图代码，符合Bootstrap浮动标签的原生设计逻辑。

方案2：添加自定义CSS适配非可空类型场景 #

如果业务逻辑不允许将属性改为可空类型，可以添加自定义CSS规则，让值为0的number输入框也能触发初始的标签效果：

.form-floating input[type="number"][value="0"]:not(:focus) + label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.7;
}
.form-floating input[type="number"][value="0"]:focus + label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

内容的提问来源于stack exchange，提问作者Jakub Puszyński