How to disable the increment and decrement buttons for lightning-input field in LWC

Try using this code.

Html code -

<template>
<input class="input1" type="number">
</template>

And Css Code -

.input1::-webkit-outer-spin-button{
    -webkit-appearance: none;

}
.input1::-webkit-inner-spin-button{
    -webkit-appearance: none;

}

The shadow dom is discouraging you to do this as specified by pmdartus here.

There is an ugly workaround that you can use. You have to use renderedCallback and set the style specified by Atlas Can here.

JS:

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

     renderedCallback() {
         const style = document.createElement('style');
          style.innerText = 'input::-webkit-outer-spin-button {display:none;}input::-webkit-inner-spin-button {display:none;}';
          this.template.querySelector('lightning-input').appendChild(style);
     }
}

Markup:

<template>
<lightning-input label="My Number" type="number" step="0.01">
</lightning-input>
</template>

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/i9HYzlT_r/2/edit

Src: https://hellosnl.blogspot.com/2019/07/lwc-override-css-of-standard-lightning-components.html

This was asked before for aura.

.THIS input::-webkit-outer-spin-button {
    display:none;
}

.THIS input::-webkit-inner-spin-button {
    display:none;
}