web-dev-qa-db-ja.com

HTML5入力タイプ番号のスタイル設定

HTML5でフォームを書いています。入力の1つはtype=numberです。入力に2桁のみを表示したいのですが、デフォルトでは少なくとも5桁が表示され、余分なスペースが必要になります。 size="2"属性を追加しようとしましたが、効果はありません。

これは私が使用しているタグ：

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

私は何が欠けていますか？

html5inputstylesnumbers
39
Michael Lewis

HTML5数値入力には、幅やサイズなどのスタイル属性はありませんが、CSSを使用して簡単にスタイル設定できます。

input[type="number"] {
   width:50px;
}
54
zak_mckraken

私は同じ解決策を探していましたが、これは私のために働いた...入力の幅を制御するためにインラインCSSタグを追加します。

例えば：

<input type="number" min="1" max="5" style="width: 2em;">

Minおよびmax属性と組み合わせて、入力の幅を制御できます。

12
user3464091

残念ながら、HTML 5では、「パターン」属性は4〜5個の属性のみにリンクされています。ただし、代わりに「テキスト」フィールドを使用し、後で数値に変換する場合は、これが役立つ場合があります。

これにより、入力が1文字（数字）から3に制限されます。

<input name=quantity type=text pattern='[0-9]{1,3}'>

CSSは基本的に「Thumbs up」または「Down」で確認できます。

例1

例2

9
Dane Balia

特定の属性は4つのみです。

  1. value-値は、ページが最初にロードされたときの入力ボックスのデフォルト値です。これは、使用しているタイプに関係なく、要素の一般的な属性です。
  2. min-明らかに、数値の最小値。 1週間に見られる映画の数に負の数を使用しても意味がないため、デモの最小値を0に指定する必要がありました。
  3. max-明らかに、これは数値入力の最大数を表します。
  4. step-ステップスケール係数。この属性が指定されていない場合、デフォルト値は1です。

そのため、キーワードでユーザータイプの長さを制御することはできません。ただし、ブラウザの実装は変更される場合があります。

3
Danil Speransky

また、size属性をstyle属性に置き換えることができます。
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

1
Yuanga