如何在HTML的组合框中更改图标的位置？

Question

我在页面上有一个搜索框，并且该框上有一个图标，我找到了该图标的示例代码。

但是我想将该图标放在组合框的右侧。我曾玩过 style ，但是无法将图标定位在右侧。

你能帮我吗？

我的代码是：

<mat-form-field class="search">
          <div class="icon-div">
            <span class="fa fa-search"></span>
          </div>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search office">
</mat-form-field>

我的样式文件是：

.search {
  position: center;
  text-align: center;
}

.search input {
  text-indent: 4px;
}

.search .fa-search {
  position: absolute;
  top: 4px;
  left: 0px;
  font-size: 20px;
  text-align: right;
}

.icon-div {
  padding-top: 4px;
}

Answer 1

将left换为right

.search .fa-search {
  position: absolute;
  top: 4px;
  right: 0px;
  font-size: 20px;
  text-align: right;
}

Answer 2

.search .fa-search {
  right: 0px;
}

Answer 3

.search {
  position: center;
  text-align: center;
}

位置中心值是无效的属性值。要获得正确的位置图标，请将下面的属性更改为

position: relative;