使用Bootstrap表单时，添加::after伪元素导致输入框border-radius归零的问题咨询

在使用Bootstrap表单时，需在输入框后添加状态提示星号：输入框验证无效时显示红色*，验证有效时显示绿色*。采用<span>标签配合::after伪元素实现该效果后，发现输入框原本的圆角样式丢失，需修复该问题。

问题原因 #

Bootstrap的.input-group组件中，默认对相邻的.form-control和其他元素有边框合并样式，直接在.form-control后添加<span>会触发该样式，导致输入框右侧圆角被覆盖。

解决方案 #

通过绝对定位放置状态星号，使其不干扰输入框的边框布局，同时保留验证状态关联逻辑：

修改后的CSS代码

/* 为输入组设置相对定位，作为星号的定位容器 */
.input-group {
  position: relative;
}

/* 定位星号到输入框右侧居中位置 */
.status-star {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: large;
}

/* 验证无效时显示红色星号 */
input:invalid ~ .status-star::after {
  content: "*";
  color: red;
}

/* 验证有效时显示绿色星号 */
input:valid ~ .status-star::after {
  content: "*";
  color: green;
}

修改后的HTML代码

<div class="col-md-6 col-lg-4">
    <div class="input-group mb-2">
         <span class="input-group-text">
             <i class="fa fa-user"></i>
         </span>
         <input required type="number" class="form-control">
         <span class="status-star"></span>
    </div>
</div>

方案说明 #

1. 给.input-group设置position: relative，为绝对定位的星号提供参考容器
2. 状态星号通过绝对定位放置在输入框右侧，不占用文档流空间，避免影响输入框的边框布局
3. 使用CSS兄弟选择器~关联输入框的验证状态与星号的样式，确保状态同步

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