Angular 8 Material：ニーズに合わせて選択オプションのスタイルをカスタマイズ

bugfix> css > 投稿

私は選択オプションの要素を持っています。各オプションには2つのテキスト、カード番号とカードの残高を示すラベルがあります。次の画像のように、それらを間にスペースを空けて1行にフロートさせたいです。

私はもう試したディスプレイフレックス しかし、効果はありませんでした。

<mat-form-field>
    <select matNativeControl required>
        <option value="default">Select your card</option>
        <option value="card_number">
            1234 4567 8901 2345
            <span class="label">1,200000$</span>
        </option>
    </select>
</mat-form-field>

css

angular-material

回答 1 件

  • 使ってみる基本的なマット選択

    <mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option>
        <div> 4567 8901 2345</div>
        <div class="label">1,200000$</div>
    </mat-option>
  </mat-select>
</mat-form-field>

    そしてCSSで：

    ::ng-deep .mat-option-text{
  display: flex!important;
    justify-content: space-between;
}

    Stackblitzコードを見る

    注意！ 選択した値を処理できないと思います

あなたの答え

関連記事