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

Posted 2023-02-22

【中文标题】删除表单输入中的灰色背景

【英文标题】：remove gray background inside form-input

【发布时间】：2021-10-28 12:59:59

【问题描述】：

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

此代码的参考您可以查看此链接：bootstrap icons。如您所见，输出应该是这样的：。 我的问题是如何删除左侧的灰色背景？我希望它看起来没有像这样的灰色背景：

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

.input-group-prepend 
  background: transparent;

我的代码有什么问题？

【问题讨论】：

尝试更改变体属性

@GhostOps 变体用于图标的颜色，对灰色背景没有影响

那么使用一些css选择器怎么样？ b-icon[icon="search"] background: #fff;

我已经用你的 css 选择器想法试过了，但它不起作用@GhostOps

@Fabalance 是的，后来我知道 h 使用 bootstrap 和 vue 后才意识到

【参考方案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;

【参考方案2】：

使用这个 CSS

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


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

【参考方案3】：

我在 b-col 上添加了一个自定义新类，以将 input-group 包装为名称，例如 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>

然后在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;