如何在Bootstrap只读Input左侧内部添加勾选图标？

要把bi-check图标嵌入只读input的左侧内部，直接放置图标标签会因为布局问题显示在外部，用Bootstrap的input-group组件就能完美解决，具体改造方案如下：

改造后的HTML结构 #

<div class="card">
  <div class="card-body">
    <form>
      <div class="row mb-3">
        <div class="col">
          <label for="kyc_status" class="form-label">
            KYC Status
          </label>
          <!-- 新增input-group容器实现图标嵌入 -->
          <div class="input-group">
            <!-- 用input-group-text包裹图标作为前置元素 -->
            <span class="input-group-text bg-transparent border-end-0">
              <i class="bi bi-check text-success"></i>
            </span>
            <!-- 调整input样式和图标区域融合 -->
            <input readonly type="text" id="kyc_status" class="form-control border-start-0 ps-2" value="Success">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

关键细节说明 #

• input-group容器：Bootstrap内置的输入组组件，专门用于在input前后附加图标、按钮等元素，保证布局对齐且样式统一。
• input-group-text样式调整：设置bg-transparent让背景和input一致，border-end-0去掉右侧边框，和input的左侧边框合并成一条线，避免视觉上的分隔感。
• input样式调整：
  • border-start-0去掉input左侧边框，防止和图标容器的边框重复。
  • ps-2（左侧内边距）调整文字位置，避免和图标重叠。
  • 可选添加text-success给图标，让勾选标记和"Success"状态颜色呼应。

额外优化（可选） #

如果需要让整个只读输入框更像静态文本（弱化输入框样式），可以统一背景色并移除边框：

<div class="input-group">
  <span class="input-group-text bg-light border-0">
    <i class="bi bi-check text-success"></i>
  </span>
  <input readonly type="text" id="kyc_status" class="form-control border-0 ps-2 bg-light" value="Success">
</div>

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