3

The arrows of <input type="number"/> in Mac are extremely small and not useful both on Chrome and Firefox even on Safari.

What is the right way to style them without adding extra arrow images and etc. Note that I've already seen these thread and it didn't solve the issue: Styling a input type=number

the out comes for that thread on MacOS are these:

LcSalazar enter image description here

Amin Memariani
  • 830
  • 3
  • 17
  • 39
  • I suggest finding a form reset css that normalizes the elements across all the browsers because working with their native styling can be frustrating and trying to figure out how to reset them back to no styling can be difficult. – Waxi Mar 07 '17 at 15:24
  • 1
    This question has been asked many, many times: http://stackoverflow.com/questions/35273377/style-input-type-number, http://stackoverflow.com/questions/31478463/change-the-appearance-of-input-type-number, http://stackoverflow.com/questions/21266888/styling-html5-number-input-spin-box-in-chrome, http://stackoverflow.com/questions/26159135/styling-html5-number-input – Heretic Monkey Mar 07 '17 at 15:31
  • @MikeMcCaughan even though these questions are similar to each other but the solutions don't seem to be smart and many of them just ignoring the main issue even many of them don't solve the issue at all because they just test their results on their own platform. That's way I asked it to find the right way. – Amin Memariani Mar 07 '17 at 15:39
  • Please read those answers. You'll find there is no way of styling the spinners in a completely cross-browser manner. Stack Overflow is for creating a library of high-quality questions and answers, not to have the same question asked over and over again in the hopes that an answer will come. – Heretic Monkey Mar 07 '17 at 15:41
  • You did not get my purpose yet! I don't want to have a same look on every platform but to adjust the current look in Mac. Which is not mentioned in anywhere before. Please read the question carefully and answer it if you have the knowledge else don't try to teach me what I already know – Amin Memariani Mar 07 '17 at 16:03

1 Answers1

10

Finally I found the way to make the native arrows a little bit bigger. Here is the trick:

input[type=number] {
  line-height: 30px;
}

input[type=number]::-webkit-inner-spin-button {
  width: 30px;
  height: 30px;
}
<input type="number" />

It worked well both on Chrome and Safari

Amin Memariani
  • 830
  • 3
  • 17
  • 39