Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

482
Vistas
Applying css styling for native material select

I have two dropdown below:

  1. Basic Mat select
  2. Basic native select
<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<h4>Basic native select</h4>
<mat-form-field appearance="fill">
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

I need to use 2nd one, Basic native select and apply css styling which looks similar to 1st one. I dont want exact same but somewhat similar, is it possible?

refer this code https://material.angular.io/components/select/overview

enter image description here

about 4 years ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

From what I know and have experienced there's no simple way to do it using just CSS. You will also need JS.

These two links should help:

  1. [https://moderncss.dev/custom-select-styles-with-pure-css/][2]
  2. [https://www.w3docs.com/snippets/css/how-to-style-a-select-box-drop-down-with-only-css.html][3]
  3. Additionally you can checkout more examples on codepen.io
about 4 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda