Angular 18: remove leading e trailing and place as complete field

Using the latest version of Angular (18.2), I am unable to style the input border, changing the colors and the border radius. I've tried several methods, but none of them work. I can't make the field "complete"—there's always this division between trailing and leading. I've also tried different approaches with --no-label, but nothing works.

mat-label is ok

first

Html:

<form class="form-group mt-5 d-flex flex-column">
<mat-label class="label">E-mail</mat-label>
<mat-form-field appearance = "outline">
<input matInput placeholder="Insira seu e-mail">
</mat-form-field>
<mat-label class="label">Senha</mat-label>

<button type="submit" class="ds-button full-width">Entrar</button>
</form>


style.scss

/* estilos globais */

html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Rawline", sans-serif !important;
}

:laceholder {
font-family: "Rawline", sans-serif !important;

}


mat-label {
color: var(--color-neutral-dark-up);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
}


.mat-mdc-form-field-infix {
background-color: rgb(175, 123, 123);
border-radius: 16px !important;
}


Second

.mat-mdc-notch-piece {
background-color: green;
border-radius: 12px !important;
}


second

Third way

```

.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
border-radius: var(--rounded-8) !important;
border-color: blue !important;
}


result:

enter image description here
```

Continue reading...