删除表单输入中的灰色背景

Question

我在 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>

您可以查看此代码的参考 link：bootstrap icons. As you can see, the output it should be like this:。我的问题是如何删除左侧的灰色背景？我希望它没有像这样的灰色背景：

我在 CSS 中这样做了，但没有任何变化：

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

我的代码有什么问题？

Answer 1

第一个障碍是识别呈现组件的标签。我在使用 css 确定标签范围时也遇到了问题，因为它们的结构在渲染后发生了巨大变化。

您使用 .input-group-prepend {background: transparent;} 的方法很好，但目标错误 css 属性。据我在文档中看到的，.input-group-text 的风格是 background-color: #e9ecef;.

由于 .input-group-text 是 .input-group-prepend 的子代，您应该可以像这样更改背景：

.input-group-prepend .input-group-text {
  background-color: none;
}

Answer 2

使用这个CSS

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

.input-group-prepend input {
  border-left:0;
}

Answer 3

我在 b-col 上添加了一个自定义的新 class 来用 search-box 等名称包装 input-group。 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>

然后使用vue中的deep selector去除灰色背景，去除边框。 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;
}

删除表单输入中的灰色背景

remove gray background inside form-input

html

css

vue.js

bootstrap-vue