HTMLで入力テキストボックスのサイズを定義するにはどうすればよいですか？

90

HTML入力テキストボックスは次のとおりです。

<input type="text" id="text" name="text_name" />

ボックスのサイズを定義するオプションは何ですか？

これをCSSにどのように実装できますか？

html css input

— オソ
ソース

— トニー・

場合によっては、設定だけmax-widthで十分です

— Christophe Roussy 2017

129

あなたはそれを設定することができますwidth：

<input type="text" id="text" name="text_name" style="width: 300px;" />

または、クラスをより適切に定義します。

<input type="text" id="text" name="text_name" class="mytext" />

別のCSSファイルで、必要なスタイルを適用します。

.mytext {
    width: 300px;
}

ユーザーがこのテキストボックスに入力できる文字数を制限する場合は、次のmaxlength属性を使用できます。

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— ダリン・ディミトロフ
ソース

10

また、「px」ではなく「em」で幅を変更でき、サイズはテキストボックスのフォントサイズに比例します

— Alexander Bird

45

size属性は、同様に、動作します

<input size="25" type="text">

— ファジー分析
ソース

8

これを試して

<input type="text" style="font-size:18pt;height:420px;width:200px;">

それとも

 <input type="text" id="txtbox">

CSSを使って：

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— ジャナサナン・ラム
ソース

3

あなたの答えは何も新しいものを追加しないので、CSSで単位（px、pt、％vなど）を指定する必要があります

— Jon P

1

まあ-font-size（style = "font-size：18pt"）は私が探していたものであり、それによってボックスのサイズも大きくなります。OPから明示的に求められることはありませんが、付加価値もあります。

— Wolf5

これはうまくいきました。したがって、どうもありがとう。ただし、テキストは垂直方向に中央揃えされているようです。何らかの方法でこれを防ぐことはできますか？

— アーロンジョンサブ

@AaronJohnSabu遅れて申し訳ありません..幅のサイズを増やしてみてください..すでに答えが見つかるといいのですが..

— Janarthanan Ramu

3

インラインスタイルを使用して幅をピクセル単位で設定できます。

<input type="text" name="text" style="width: 195px;">

表示される文字長で幅を設定することもできます。

<input type="text" name="text" size="35">

— ベトリス・マパランジ
ソース

-2

<input size="45" type="text" name="name">

「サイズ」は、要素入力の表示幅を文字数で指定します。

cssの高さと幅を使用することもできます。

<input type="text" name="name" style="height:100px; width:300px;">

— ダニエルドスサントス
ソース