4

I have a below lightning input field of type number.

<lightning-input variant="label-hidden" type="number" step="0.01">
</lightning-input>

input field image

as shown on the above image it adds two unnecessary button to increment and decremente the value, please suggest how to get rid of the same.

2

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

  • Thank you Pranay, it worked as expecteded but it seemed like it slowed down the page, but still thank you again for the work around. – gs650x Nov 15 at 6:07
  • @gs650x because rendered callback gets called every time a change in ui happens. You can use a Boolean flag to see if you have already assigned style. If u did, don’t enterter again. – Pranay Jaiswal Nov 15 at 6:10
  • Sure Pranay, will add a boolean flag, thanks – gs650x Nov 15 at 6:12
  • 1
    @gs650x you can use name attribute of lighting-input and use complex query selector developer.mozilla.org/en-US/docs/Web/API/Document/querySelector – Pranay Jaiswal Nov 15 at 6:18
  • 1
    @gs650x a better way would be to create a sperate components, c-lightning-input without steps that you can reuse . – Pranay Jaiswal Nov 15 at 6:20
3

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;

}
  • Thank you so much for responding, but is there any other way to use lightning input field and avoiding the increment and decrement button? – gs650x Nov 14 at 15:28
  • if you want to hide spin button then you must go by this method. – Sahil Malhotra Nov 14 at 16:27
  • Thank You!! @SahilMalhotra This works. – nitesh.kodle123 Nov 23 at 11:29
2

This was asked before for aura.

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

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

You cannot disable the step buttons in the lightning-input for type number as this component stands. Omitting step uses the default of 1 for the step size. Trying to set it to 0 or NaN (or any unrecognized value) is treated as if it were set to 1.

See the documentation for what you can do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.