How to delete arrows from button when button is in component

Question

I have component (child) which is giving button:

/// input.component.html
<mat form-field class="...">
    <mat-label>
    <input matInput [type]="type">
<mat form-field>

and when I use it in parent component as <app-input type=""number></app-input> it gives me input field but with arrows. How can I remove it? I would like to remove it only in one place, without changing it in every place of code.

When I add this to parent style.css its not working

    input[matinput]::-webkit-outer-spin-button,
    input[matinput]::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
    }