web-dev-qa-db-ja.com

右揃えのときにinputtype = "number"にpadding-rightを追加するにはどうすればよいですか？

この問題について何も見つけられなかったなんて信じられません。

私の新しいプロジェクトでは、将来のユーザーはいくつかのinput type="number"を持つ列を持ち、数値フィールドとして（単一のtextoneはありません）、数字を右に揃えたいと思います。

数字が矢印に近すぎることがわかったので、論理的には、それらにpadding-rightを追加しました。

驚いたことに、矢印から数字を少し分離できないようです。 padding-rightは数字に沿って矢印を移動します。

基本的に、Operaだけがpaddingを正しい方法で実行します。しかし、下の画像でわかるように、私がテストした他の主要な3つのブラウザーはそうではありません。

enter image description here

そう。数字を矢印から分離して、少なくともFirefoxとChromeで機能するようにする方法はありますか（Webアプリのこれら2つのブラウザーに推奨されます）。

a [〜＃〜] jsfiddle [〜＃〜] 簡単な例

htmlcssgoogle-chromefirefox
21
Alvaro Menéndez

padding-rightを使用する代わりに、次のCSSを使用します

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { margin-left: 20px; }

上記のFirefoxの場合、解決策は機能しないため、最善の解決策はそれを非表示にすることです。

input[type=number] {
    -moz-appearance:textfield;
}

または、jqueryプラグインで「遊ぶ」こともできます。

11
SpiRT

これはかなり面倒です。私の場合、スピナーを左に渡すことで状況を解決しました。

<input dir="rtl" type="number"/>
2
Pedro Pam

CSSでフィールドを左揃えにします

[type="number"] {
  text-align: right;
  direction: rtl;
}
<input type="number" min="0" max="9999" placeholder="Enter value ...">

@ Pedro Pamが提案したように

2
DreamTeK

これを試して

[〜＃〜] html [〜＃〜]

<div class="form-row">
<input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
</div>

[〜＃〜] js [〜＃〜]

webshims.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'number'
});
webshims.polyfill('forms forms-ext');

デモはこちら

1
Shrinivas Pai