How to Customize Number Input Type Cell ag-grid

Question

I do have input columns in my ag-grid which should accept only number type values.

   ngOnInit(): void {

        this.columnDefs = [
 {
            headerName: 'Header', field: 'quantity',
            cellRendererParams: params => {
              return {
                inputType: 'number'
              };
            }
          }
    ];

When using the above approach, the behavior is as expected, but 2 arrow buttons (up and down) are added in the cell which can increase or decrease the current value by one.

I can't figure out how to remove this buttons, since no reference of these could be found.

Is there any other approach? or, how can these buttons be removed?

Answer 1

by css you can try

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

but still working mouse wheel to increment/decrement number

Answer 2

Can you try following:

ngOnInit(): void {

        this.columnDefs = [{
            headerName: 'Header', field: 'quantity',
            cellRenderer: params => {
              return '<input type="number" class="my-custom-input-class">';
            }
        }];
}

and css

input[type=number]::-webkit-inner-spin-button.my-custom-input-class, 
input[type=number]::-webkit-outer-spin-button.my-custom-input-class { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}