样式<input type = number />微调箭头正确

Mac中的<input type="number"/>的箭头非常小，在Chrome和Firefox上甚至在Safari上都不是很有用。样式<input type = number />微调箭头正确

什么是他们的风格无需添加额外的箭头图像的正确方法等请注意，我已经看到了这些线程，它并没有解决这个问题： Styling a input type=number

的出来自该线程是这些：

2017-03-07 Amin Memariani

我建议找一个形式复位的CSS跨所有的浏览器标准化的元素，因为他们的原生样式工作可能会令人沮丧，并试图找出如何将它们重置为无风格可能会很困难。 – Slime

此问题已被多次询问：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 –

@MikeMcCaughan即使这些问题彼此相似，但解决方案似乎并不聪明，其中许多人忽略了主要问题，甚至许多人根本不解决问题，因为他们只是在自己的平台上测试他们的结果。这就是我要求它找到正确的方法。 –

终于让我找到了让本地箭头变大一点的方法。这是使用方法：

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

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

<input type="number" />

它运作良好无论在Chrome和Safari

来源

2017-03-07 23:33:42

这对Chrome的Windows版本也很好。在Firefox的Windows中，它只是将它显示为没有任何样式。 –

样式<input type = number />微调箭头正确

回答

相关问题