DataAnnotationsValidator renders Box in MatTextField

[minimalisticMe]

Hi,

I'm doing my first steps in Blazor and MatBlazor. I have a question regarding validation. Whenever a validation fails, I am displayed a red bounding box instead of just a red underline.

My razor page:

@page "/login"
@using ClientB.Models

<h1>Login</h1>

<EditForm Model="login">
    <DataAnnotationsValidator />

    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Mail" Label="Mail-Address" Icon="mail_outline" Dense="true"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Mail)" />
    </p>
    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Password" Label="Password" Icon="lock_outline" Type="password"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Password)" />
    </p>
    <p>
        <MatBlazor.MatButton OnClick="@LoginClick" Label="Login"></MatBlazor.MatButton>
    </p>
</EditForm>

@code {
    private LoginModel login = new LoginModel();

    public void LoginClick(MouseEventArgs e)
    {

    }
}

However a failed validation attempt renders a red bounding box instead of just a read underline, like in the example here: https://samprof.github.io/MatBlazor/EditContext Expected (like in the example):

Actual:

How can I get rid of that red bounding box during a validation error and show it like in the example?

[thedigitaltailor]

I had the same problem.

The default site.css rolled out with the template has the line: `.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid red; }`

This is what caused it. I commented it out and it fixed the issue. Hope this helps.

[minimalisticMe]

I removed the part with

.invalid {
outline: 1px solid red;
}

from file \wwwroot\css\app.css

and now everthing looks like expected. Thank you very much @thedigitaltailor !!