小编qua*_*805的帖子

聚焦时我有一个这样的搜索框：

如何更改其背景、边框和图标的颜色？以及不对焦时的修改方式。

我的代码：

<TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Search />
            </InputAdornment>
        ),
        classes: {input: classes.input}
    }}
/>

CSS：

searchBarStyle: {
    height: "40px",
    width: "200px",
    margin: "0 0 0 0",
    float: "right",
},
input: {
    color: "white",
    textDecoration: "none",
    '&::placeholder': {
        color: 'white',
        fontWeight: "400"
    }
}

我试图搜索将 插入Font Awesome icon到输入组的方式，Bootstrap-vue但没有出现任何内容。我试图搜索 Bootstrap 4，但大多数教程都是针对 Bootstrap 3 的。我试过这个，但它对我不起作用。

我现在所拥有的：

它应该是这样的（只有图标，不是整个样式）：

我的 HTML：

<b-card no-body class="UniqueFullWidth">
  <b-tabs card>
    <b-tab title="Sign up" style="width:auto">
      <br>
      <b-form-input size="lg" placeholder="Full name">
      </b-form-input>
      <br>
      <b-form-input size="lg" placeholder="Username">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="password" placeholder="Password">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="email" placeholder="Email">
      </b-form-input>
    </b-tab>
    <b-tab title="Log in" active>
    <br>
      <b-form-input size="lg" placeholder="Username">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="password" placeholder="Password">
      </b-form-input>
    </b-tab>
  </b-tabs>
</b-card>

我目前的 CSS：

.UniqueFullWidth .card-header {
  font-size: 1.3em;
}
.UniqueFullWidth { …