樣式<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 />微調箭頭正確

回答

相關問題