Styling <input type=number/> spinner arrows

问题:

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:

回答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