5

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.

Improve this question

4 Answers 4

Reset to default
3

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

Improve this answer
8
  • 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
    Commented Nov 15, 2019 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
    Commented Nov 15, 2019 at 6:10
  • Sure Pranay, will add a boolean flag, thanks
    – gs650x
    Commented Nov 15, 2019 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
    Commented Nov 15, 2019 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
    Commented Nov 15, 2019 at 6:20
4

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;

}
Improve this answer
3
  • 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
    Commented Nov 14, 2019 at 15:28
  • if you want to hide spin button then you must go by this method.
    – Sahil Malhotra
    Commented Nov 14, 2019 at 16:27
  • Thank You!! @SahilMalhotra This works.
    – nitesh.kodle123
    Commented Nov 23, 2019 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;
}
Improve this answer
2
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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .