remove gray background inside form-input

Question

I have a code in bootstrap-vue 2.21.2:

<b-input-group class="mb-2 mr-sm-2 mb-sm-0">
   <b-input-group-prepend is-text>
     <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>

reference for this code you can check to this link: bootstrap icons. As you can see, the output it should be like this:. My question is how can I remove the gray background on the left hand side? I want it to appear without a gray background like this:

I've done like this in my CSS but nothing change:

.input-group-prepend {
  background: transparent;
}

What's wrong with my code?

Answer 1

I added a custom new class on b-col to wrap the input-group with the name for e.g search-box. HTML:

      <b-col
        cols="12"
        md="auto"
        class="search-box pr-md-2 pt-2 pt-md-0"
      >
        <b-input-group class="mb-2 mr-sm-2 mb-sm-0">
          <b-input-group-prepend is-text>
            <b-icon icon="search" variant="dark" />
          </b-input-group-prepend>
          <b-form-input
            id="filter-product"
            v-model="searchText"
            type="text"
            placeholder="Cari Toko"
            @input="debounceInput"
          />
        </b-input-group>
      </b-col>

Then use the deep selector in vue to remove the gray background and remove the border. CSS:

.search-box >>> .input-group-prepend > .input-group-text {
  background-color: transparent;
  border-right: none !important;
}
.search-box >>> .input-group-prepend + input.form-control {
  border-left: none !important;
}
.search-box >>> .input-group-prepend + input.form-control:focus {
  outline: none;
}