造型< input type = number />微调箭头正确的方式 [英] Styling <input type=number/> spinner arrows the right way

问题描述

Mac中的< code>< input type =number/> 这两个箭头非常小，在Chrome和Firefox上甚至在Safari上都不是很有用。

在没有额外的箭头图像等的情况下，设计风格的正确方法是什么？ 。请注意，我已经看到这些线程，它并没有解决问题：

解决方案最后我找到了让原生箭头变大一点的方法。这里有个技巧：

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

< input type =number />

/ p>

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:

解决方案

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

这篇关于造型< input type = number />微调箭头正确的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！