how delete focus border on click date

Question

I need to put a date in my apllication so I do this:

<!--data -->
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6  col-xl-6 form-group">
                            <mat-form-field>
                                <mat-label>Data di nascita</mat-label>
                                <!-- #docregion toggle -->
                                <input matInput [matDatepicker]="picker" placeholder="gg/MM/yyyy">
                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                <mat-datepicker #picker></mat-datepicker>
                                <!-- #enddocregion toggle -->
                            </mat-form-field>
                        </div>

The problem is I don't know how remove this focus in the image:

In my style.css I do this:

@import '~@angular/material/theming';
@import '~bootstrap-italia/dist/css/bootstrap-italia.min.css';

The problem could be some rules that I import. Anyone can help to remove the focus yellow in the components that I have seen in my image?

Answer 1

::ng-deep *,*:focus,*:hover{
   outline:none !important;
}

Add this CSS to your Page CSS file

Answer 2

It's because of the default input style use this

  input:focus { outline: none; }