如何在Bootstrap+TMS WebCore环境下实现HTML输入框内前置$符号

你好呀！从你的描述来看，你确实找对方向啦——用CSS伪元素实现输入框内的前置$符号，就是目前最靠谱的方案，因为原生HTML input标签确实没有内置属性能直接在框内添加前缀符号~

为什么原来的Bootstrap方案不满足需求？ #

你之前用的<span class="input-group-text">$</span>是Bootstrap输入组的标准用法，但它的设计逻辑是把前缀放在输入框外侧的独立文本容器里，和输入框是两个相邻元素，视觉上就是分开的，这和你想要的“$嵌入输入框内部”的需求完全不匹配，所以必然会出现美元符号在框外的情况。

适配Bootstrap+TMS WebCore的完整实现方案 #

结合你的原有布局（包括TMS控件ID、Bootstrap的form-group/col布局），我调整了CSS代码，让它完美适配你的场景：

1. 修改后的HTML结构（保留TMS控件ID，添加自定义容器类）

<div class="form-group required col-lg-12">
  <label id="form.lblCost_PP" class="col-md-1">Cost Per Person:</label>
  <div class="col-md-1">
    <!-- 用自定义的currency-input容器包裹输入框 -->
    <div class="currency-input">
      <input id="form.edtCost_PP" class="form-control" type="number">
    </div>
  </div>
  <label id="form.lblTotal_Cost" class="col-md-1">Total Price:</label>
  <div class="col-md-1">
    <div class="currency-input">
      <input id="form.edtTotal_Cost" class="form-control" type="number">
    </div>
  </div>
</div>

2. 适配Bootstrap的CSS代码

/* 货币输入框容器样式 */
.currency-input {
  position: relative;
  display: block; /* 适配Bootstrap col的块级布局 */
}

/* 生成前置$符号的伪元素 */
.currency-input::before {
  content: "$";
  position: absolute;
  left: 12px; /* 和Bootstrap form-control的内边距对齐，视觉更协调 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  pointer-events: none; /* 关键：点击$区域时不影响输入框获取焦点 */
  /* 和Bootstrap input-group-text的样式统一 */
  color: #212529;
  font-size: 1rem;
  font-weight: 400;
}

/* 给输入框添加左侧内边距，避免输入内容被$挡住 */
.currency-input .form-control {
  padding-left: 32px; /* 预留$符号的位置 */
}

几个关键细节说明 #

• pointer-events: none;：这个属性一定要加，不然用户点击$符号的位置时，输入框会无法获取焦点，影响操作体验。
• 样式对齐：特意调整了$符号的位置、颜色和字体，和Bootstrap原生的input-group-text保持一致，不会破坏页面的整体风格。
• TMS WebCore兼容：完全保留了你原来的控件ID（比如form.edtCost_PP），不会影响TMS的事件绑定和数据交互。

这种纯CSS方案不需要额外的JavaScript，性能好，而且完美满足你“$显示在输入框内部”的需求，你之前的思路完全正确，只要按上面的代码调整适配Bootstrap即可~

内容来源于stack exchange