web-dev-qa-db-ja.com

デフォルトの入力要素サイズ

これがインラインで定義されていないか、CSSスタイルルールがそれに起因する場合、入力要素はデフォルトでsize = "20"です。

デフォルトを値の実際のサイズにするにはどうすればよいですか？その他の要素の場合：

<div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

幅：自動で十分です。値が長くなる可能性があるため、定義された幅を配置できません。例えば：

<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

#shortを1000のサイズ（基本的にsize = "4" +パディング）にしたいのですが、＃longを必要なだけ長くしたいと思います。これらの入力はプログラムで行われるため、短くしたいものに短いクラスを、長くしたいものに長いクラスを単純に配置することはできません。私が置くことができれば私は本当にそれが欲しいです：

input { width: auto; }

とにかくこれを行うには？

htmlcssinputtextbox
12
o_O

デフォルトの入力要素はsize = "20"です。

この「デフォルトサイズ」は、ブラウザ、バージョン、およびOSによって異なります。インラインスタイルでこれを行うことはできません。

最善の解決策は、幅とパディングを設定して、合計が100％になるようにすることです。

input {
  width: 98%;
  padding: 1%;
}

次に、それを絶対左右0に設定します

<fieldset>
    <input type="text" />
</fieldset>

最後にこのCSSを追加します

<style type="text/css">
    fieldset {
      position: relative;
    }

    input {
        position: absolute;
        left: 0;
        right: 0;
    }
</style>
8
Sato

"デフォルトを値の実際のサイズにするにはどうすればよいですか？（...）次のように入力できれば本当に気に入っています：input {width：auto;}とにかくこれを行うには？ "

入力HTML要素では、widthはそのsize属性によって制御されます。これは、私が{ width: auto; }をシミュレートするために使用する簡単な方法であり、ブラウザーの依存関係を証明するものです。

<input type="text" [size]="element.value.length + 1" #element>
1
Fabricio

フォームの独自の行に各入力があると仮定すると、size属性を目的のサイズに設定できますが、次のcssを追加することもできます。

input[type="text"] {
  max-width: 100%;
}

これにより、フィールドがフォームからオーバーフローしないようになります。このアプローチは、長いフィールドに上限を設定しながら、短いフィールドに予想されるデータの量を視覚的に示します（適切なサイズになるため）。

1
mefopolis