如何移除BootstrapVue表单输入框前置图标区域的灰色背景

问题原因 #

1. 你给<b-input-group-prepend>添加的is-text属性，会让组件渲染时自动添加.input-group-text类，Bootstrap原生该类默认自带background-color: #e9ecef的灰色背景样式，你仅为父容器.input-group-prepend设置透明背景，没有命中实际携带背景样式的子元素，因此不生效。
2. 如果你是在Vue单文件组件的<style scoped>块中编写的自定义样式，scoped样式的优先级限制也可能导致无法覆盖Bootstrap的默认样式。

解决方案 #

方案一：移除is-text属性（推荐） #

你当前仅在前置区域放置图标，不需要输入组文本的默认样式，直接移除is-text属性即可，不会生成带有灰色背景的.input-group-text类，修改后代码如下：

<b-input-group class="mb-2 mr-sm-2 mb-sm-0">
   <b-input-group-prepend>
     <b-icon icon="search" variant="dark" />
   </b-input-group-prepend>
   <b-form-input
     id="filter-product"
     v-model="searchText"
     type="text"
     placeholder="Search Store"
    />
 </b-input-group>

方案二：覆盖默认样式 #

如果业务需要保留is-text属性，直接针对.input-group-text设置样式即可：

• 非scoped样式写法：

.input-group-prepend .input-group-text {
  background-color: transparent;
  /* 若不需要前置区域的边框，可额外添加 border: 0; */
}

• scoped样式写法（需要用深度选择器穿透）：

/* Vue2环境使用::v-deep */
::v-deep .input-group-prepend .input-group-text {
  background-color: transparent;
}

/* Vue3环境也可以使用:deep() */
:deep(.input-group-prepend .input-group-text) {
  background-color: transparent;
}

内容的提问来源于stack exchange，提问作者Mohamad Handy Nugraha