How to always show the "increment arrows" in a matInput of type number?

user_884319 0
Viewed 3849

A picture is worth a 1024 words:

enter image description here

How do I force those arrows to show all the time ? By default, they only appear on hover. 

<input matInput type="number" placeholder="Value" [(ngModel)]="myValue">

I could not find anything, and I am not even sure how these buttons are called.

angular-material
1 Answers

This has to do with the browser as this isn't shown when using Firefox. You can add this css to fix the issue in Chrome.

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}
user_87315030
Related