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

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

ただ使用する：

textarea {
    width: 200px;
}

または

input[type="text"] {
    width: 200px;
}

「テキストボックス」の意味によって異なります。

あなたのマークアップ：

<input type="text" class="resizedTextbox" />

CSS：

.resizedTextbox {width: 100px; height: 20px}

テキストボックスのサイズはW3Cボックスモデルの「犠牲者」であることに注意してください。犠牲者が言っているのは、テキストボックスの高さと幅は、パディングの高さと幅、および境界の幅に加えて、上で割り当てられた高さと幅のプロパティの合計であるということです。このため、ブラウザごとのデフォルトのパディングに応じて、ブラウザごとにテキストボックスのサイズがわずかに異なります。ブラウザーによってテキストボックスのパディングが異なる傾向がありますが、ほとんどのリセットスタイルシートは<input />、リセットシートにタグを含める傾向がないため、注意が必要です。

独自のパディングを定義することでこれを標準化できます。ここに指定されたパディングを使用したCSSがあるため、テキストボックスはすべてのブラウザで同じように見えます。

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

一部のブラウザでは、パディングが0pxの場合、テキストボックスが詰め込まれているように見える傾向があるため、1ピクセルのパディングを追加しました。設計によっては、さらにパディングを追加することもできますが、パディングを自分で定義することを強くお勧めします。そうしないと、別のブラウザに任せて自分で決めることになります。ブラウザー間でさらに一貫性を保つには、境界線を自分で定義する必要もあります。

input[type="text"]
{
    width:200px
}

あなたのテキストボックスコード：

<input type="text" class="textboxclass" />

あなたのCSSコード：

input[type="text"] {
height: 10px;
width: 80px;
}

または

.textboxclass {
height: 10px;
width: 80px;
}

したがって、最初に属性（最初の例を参照）またはクラス（最後の例を参照）を持つ要素を選択します。後で、要素に高さと幅の値を割り当てます。

これは、IE 10およびFF 23で私にとっては機能します

<input type="text" size="100" />

クラスメソッドを使用しない場合は、親子メソッドを使用してテキストボックスに変更を加えることができます。

たとえば フォームdivでフォームを作成しました。

HTMLコード：

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

CSSコードは次のようになります。

.form textarea{
    height: 220px;
    width: 342px; 

問題が解決しました。

外を見る！width属性は、max-width属性によって切り取られます。だから私は...

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

試してください：

input[type="text"]{
padding:10px 0;}

これは、テキストボックスに設定されているテキストサイズに依存しない方法です。代わりにパディングを使用して高さを増やしています

このコードを試してください：

input[type="text"]{
 padding:10px 0;}

このようにして、テキストボックスに設定されているテキストサイズに依存しません。代わりにパディングを使用して高さを増やしています。

要素はheightおよびwidth属性を使用してサイズを設定できます。

依存する入力幅とコンテナ幅を作成できます。

.container {
   width: 360px;
}

.container input {
   width: 100%;
}