箭头不会从字段中的位置移动

Question

 <div class="content">
    <div fxFlex="100" fxLayout="column" class="specifique">
      <span class="text">Osmose</span>
      <div tabindex="4" class="siga-choix-themes-component">
        <div fxLayout="row">
          <mat-form-field class="osmoseForm-full-width">
            <input type="text" placeholder="Osmose(s)" aria-label="Number" matInput maxlength="8" formControlName="osmoses"
              [matAutocomplete]="auto" required minlength="8" (blur)="onBlur()">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayOsmoses">
              <mat-option *ngFor="let osmose of osmoses trackBy: trackById" [value]="osmose">
                {{ osmose.code }}
              </mat-option>
            </mat-autocomplete>
            <div class="mat-select-arrow-wrapper">
              <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !auto.isOpen, 'mat-select-arrow-up': auto.isOpen}"></div>
            </div>
            <button class="space-close" mat-button *ngIf="osmosesControl.value" matSuffix mat-icon-button aria-label="Clear"
              (click)="osmosesControl.setValue('')">
              <mat-icon>close</mat-icon>
            </button>
            <mat-hint></mat-hint>
            <mat-error *ngIf="osmosesControl.hasError('pattern')">
              <strong>
                {{'messages.osmoseCodeFormat' | translate}}
              </strong>
            </mat-error>
          </mat-form-field>
          <!-- Osmose part 2 -->
          <div class="siga-separator">&nbsp;&nbsp;</div>
          <mat-form-field class="osmose-libelle" fxFlex="40">
            <input class="" matInput formControlName="osmose_libelle">
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>
</form>

因此，如果不使用填充将箭头移动到字段的右侧，我将无法使箭头向上移动。我尝试使用display：inline-block，flex，它仍然站在同一位置。我以为是因为div，但还是无济于事。

我什至尝试使用顶部，右侧或左侧或将位置更改为绝对位置。

这是CSS：

.mat-select-arrow-wrapper>div {
  display: inline-block;
  vertical-align: calc(3px);
  margin: 0;
  right: 100%;
}

.mat-select-arrow-down {
  border-left: $mat-select-arrow-size solid transparent;
  border-right: $mat-select-arrow-size solid transparent;
  border-top: $mat-select-arrow-size solid;
}

.mat-select-arrow-up {
  border-top: 0px;
  border-left: $mat-select-arrow-size solid transparent;
  border-right: $mat-select-arrow-size solid transparent;
  border-bottom: $mat-select-arrow-size solid;
}