Agréguelos a su CSS en su stackblitz original

 ::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;} ::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; } ::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

ACTUALIZADO : con transición para la etiqueta...

 ::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;} ::ng-deep .mat-form-field-label-wrapper { top: -1.5em; } ::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { transform: translateY(-1.1em) scale(.75); width: 133.33333%; }

El uso de la solución de @AkberIqbal arruinó mi estilo para los campos de formulario mat que no estaban outline . Además, esta solución no necesita ningún !important; . Con !important; ya estas perdido :D

Así que aquí hay una forma segura de agregar a sus estilos globales: (parece excesivo, pero prefiero salvarlo que lamentarlo)

 mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix { padding: 0.4em 0px } mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; } .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { transform: translateY(-1.1em) scale(.75); width: 133.33333%; }

Entonces, como puedes ver. ¡"Busco" cada clase hasta que encuentro un esquema! Me gusta que el estilo de contorno solo se aplique a los campos de contorno .

TLDR: ajuste el tamaño de fuente del contenedor circundante.

Más largo: la funcionalidad para cambiar el tamaño de los campos de formulario está integrada en Angular Material, por lo que, a menos que desee cambiar las proporciones relativas en el campo, no necesita enredarse con el cambio de tamaño de los componentes individuales ( consulte la documentación ).

La clave para ajustar el tamaño del campo es simplemente ajustar el tamaño de fuente en el contenedor circundante. Una vez que hagas eso, todo lo demás escalará con él. p.ej

Con contenedor tamaño de fuente: 12px;

 <div style="font-size: 12px"> <mat-form-field appearance="outline"> <mat-label>Your name</mat-label> <input matInput placeholder="Jane Doe"> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Your email</mat-label> <input matInput placeholder="you@youremail.com"> </mat-form-field> </div>

Forma resultante:

Con contenedor tamaño de fuente: 18px;

 <div style="font-size: 18px"> <mat-form-field... </div>

Forma resultante:

nótese bien

Esta no es una solución para usted si no está satisfecho con la proporción de relleno dentro de los formularios. Sin embargo, esa es una pregunta diferente a cómo simplemente cambia el tamaño de los formularios. ¡Cambiar el tamaño es simple, alterar las proporciones de relleno y margen es más peludo!

En caso de que alguien quiera hacer que la respuesta de Akber Iqbal se base en la clase (para tener ambos tamaños disponibles):

 :host ::ng-deep { .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;} .mat-form-field-label-wrapper { top: -1.5em; } &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { transform: translateY(-1.1em) scale(.75); width: 133.33333%; } } }

Con suerte, el equipo de Angular agregará soporte para IU de alta densidad en versiones futuras (la alta densidad es parte de las especificaciones de diseño de materiales ).

Aquí hay una solución mía reciente para un campo de 32 px de alto y que permite esquinas redondeadas.

 & .mat-form-field-wrapper { height: 44.85px; & .mat-form-field-flex { height: 32px; & .mat-form-field-outline { $borderRadius: 25px; height: 28px; & .mat-form-field-outline-start { border-radius: $borderRadius 0 0 $borderRadius; width: 13px !important; // Override Material in-line style } & .mat-form-field-outline-end { border-radius: 0 $borderRadius $borderRadius 0; } } & .mat-form-field-infix { left: 4px; padding: 0; top: -7px; & .mat-form-field-label, & .mat-input-element { font-size: 12px; } & .mat-form-field-label-wrapper { top: -1.04375em; & .mat-form-field-label { height: 16px; } } } } }

Puede anular profundamente el valor de relleno del estilo de contorno:

 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { padding: .5em; }

para mi fue una buena solucion

Aplique el cambio al selector .mat-form-field .mat-form-field-infix . En Sass sería:

 .mat-form-field { .mat-form-field-infix { height: 16px; } }

Esto funcionó para mí:

 ::ng-deep .mat-form-field-infix { height: 25px; font-size: 12px; }

Si no está utilizando 'mat-label' dentro de 'mat-select', entonces el css a continuación funcionará

 ::ng-deep { .mat-form-field-infix { border: 0px !important; } .mat-form-field-appearance-outline .mat-select-arrow-wrapper { transform: none !important; } }

Antes:

Después:

Este 'problema' de no poder ocultar la etiqueta flotante se menciona aquí: https://github.com/angular/components/issues/11845

Una buena solución mencionada allí es no incluir una etiqueta de mat en su campo de formulario de mat y agregar esto a su css, ya sea local o global. Es posible que necesite usar ::ng-deep.

 .mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix { border-top-width: 0; }

Como han explicado muchas personas de la publicación, el campo de formulario angular del material se basa en el tamaño de fuente, por lo que para todos ustedes que desean definir un campo de formulario personalizado, aquí está mi código para cambiar el tamaño tanto de alto como de ancho sin afectar la fuente o el icono de entrada alternar tamaño.

• Defina dentro del componente css este código y aplíquelo como una clase a la etiqueta mat-form-field.

 .custom-form-field { width: 200px; font-size: 10px; margin-top: 3px; margin-bottom: -1.25em; mat-datepicker-toggle { font-size: 12px; } input.mat-input-element { padding-bottom: 2px; font-size: 12px; color: $title-color; } }

Esto es lo que usé:

 .small-input.mat-form-field-appearance-outline .mat-form-field-infix { padding: .25em 0 .75em 0; font-size: 14px; } .small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;} .small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

Aquí hay otro enfoque:

 /* Angular Material Overrides */ .mat-form-field-appearance-outline .mat-form-field-outline { color: #ccc; /* Override outline color. */ } .mat-form-field-appearance-outline .mat-form-field-infix { padding: .65em 0; /* Original top/bottom value was 1em. */ } .mat-input-element { position: relative; top: -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */ } .mat-form-field-label-wrapper { top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */ }

TL; DR Los campos de formulario de material se basan en la propiedad de font-size del campo.

No cometa el error de ajustar las alturas de los materiales, las paletas, etc. en su CSS/SCSS... Los elementos de Material Form, como la entrada y las selecciones, se basan en font-size . Además, no se recomiendan los estilos en línea, por lo que simplemente puede agregar algo de CSS. El atributo `apariencia es irrelevante.

 ::ng-deep .mat-form-field { font-size: 12px; // example }