スタイリング<input type = number />スピナーの矢印が正しい方法

Macの<input type="number"/>の矢印は非常に小さく、SafariでもChromeとFirefoxの両方で役立ちません。 Styling a input type=number スタイリング<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 for Windowsでもうまくいきます。 Firefox for Windowsでは、スタイリングなしで表示します。 –

スタイリング<input type = number />スピナーの矢印が正しい方法

答えて

関連する問題