Styling <input type=number/> spinner arrows

Question

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 are these:

Answer 1

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

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

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

<input type="number" />

It worked well both on Chrome and Safari