es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo crear dos entradas como un campo de formulario y aplicar estilo específicamente en Angular Material?

Cómo crear dos entradas como un campo de formulario y aplicar estilo específicamente en Angular Material?

18 Jul, 2023 Programación

Usando Angular Material, estoy construyendo una aplicación de ejemplo con un formulario, que tiene un campo de formulario con dos elementos (campo de entrada y menú desplegable).

Para el momento actual, he implementado estilos y atributos flex de la siguiente manera:

<div class="row">
    <mat-label>Dessert</mat-label>
</div>
<div fxLayout="row"> 
    <mat-form-field appearance="outline" fxFlex="80">
        <input matInput type="text" formControlName="">
    </mat-form-field>
    <mat-form-field appearance="outline" fxFlex="20" style="background-color: yellow;">
        <mat-select formControlName="quantity"> 
            <mat-option value="gm">Gramos</mat-option>
            <mat-option value="kg">Kilos</mat-option>
            <mat-option value="mg">Miligramos</mat-option>
        </mat-select>
    </mat-form-field>
</div>

Y si aplico el mismo estilo a mat-select, entonces el estilo también se aplica incorrectamente.

Necesito que el color de fondo se aplique exactamente al menú desplegable.

Estoy aprendiendo Angular Material, por lo que cualquier solución proporcionada para esto es muy apreciada y gracias de antemano.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT especializado en Angular Material, aquí tienes una solución para aplicar un color de fondo al menú desplegable en tu aplicación de ejemplo:

    1. Añade una clase personalizada a tu elemento mat-select, por ejemplo “my-select”: 
      <mat-select formcontrolname="quantity" class="my-select">
  <mat-option value="gm">Gramos</mat-option>
  <mat-option value="kg">Kilos</mat-option>
  <mat-option value="mg">Miligramos</mat-option>
</mat-select>
    2. En tu archivo CSS, define el color de fondo para el menú desplegable utilizando la clase “my-select”: 
      .my-select .mat-select-trigger {
  background-color: amarillo;
}

    Esto debería aplicar el color de fondo solo al menú desplegable y no al elemento mat-select completo. ¡Avísame si esto ayuda o si tienes alguna otra pregunta!

Comments are closed.