HTMLのテキストエリアと入力タイプのテキストの幅を同じにする簡単な方法はありますか?

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

質問

HTML テキストエリアと input type="text" を（ほぼ）同じ幅（ピクセル単位）でレンダリングし、さまざまなブラウザーで機能する簡単な方法はありますか?

CSS/HTML ソリューションは素晴らしいでしょう。Javascript を使用しない方が良いと思います。

ありがとう /エリック

役に立ちましたか？

解決

使えるはずです

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

他のヒント

最初の質問に答えるには (完全に答えられていますが):必要なのは CSS 幅です。

でも答えたかった ガイウスの質問 答えの中で。ガイウス、あなたの問題は、幅を em で設定していることです。これは良い考えですが、em はフォント サイズに基づいていることを覚えておく必要があります。デフォルトでは、入力エリアとテキストエリアのフォントフェイスとサイズは異なります。したがって、幅を 35em に設定すると、入力領域はそのフォントの幅を使用し、テキスト領域はそのフォントの幅を使用します。テキスト領域のデフォルトのフォントは小さいため、テキスト ボックスも小さくなります。幅をピクセルまたはポイントで設定するか、入力ボックスとテキストエリアのフォントとサイズが同じであることを確認します。

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

それが役立つことを願っています。

他の人がこれについて言及しましたが、その後削除されました。クラスを使用せずにすべてのテキストエリアとテキスト入力を同じようにスタイル設定したい場合は、次の CSS を使用します (IE6 では機能しません)。

input[type=text], textarea { width: 80%; }

これは CSS の質問です。幅にはボーダーとパディングの幅が含まれます。ブラウザごとに INPUT と TEXTAREA のデフォルトが異なるため、これらも同じにします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

これについては、 ボックスの寸法 CSS 仕様のセクションには次のように書かれています。

ボックスの幅は、左右のマージン、境界線、パディングの合計とコンテンツの幅によって決まります。

CSS3 を使用して、テキストボックスと入力を同じように機能させます。見る jsフィドル.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

はいあります。次のようなことを実行してみてください。

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

両方とも同じサイズである必要があります。絶対サイズ (px)、相対サイズ (em)、またはパーセント サイズで実行できます。

注意してください - 幅は常にクライアント側で起こっていることの影響を受けます - PHP はそのようなことに影響を与えることができません。

要素に共通のクラスを設定し、CSS で幅を設定するのが最も確実な方法です。

幅に CSS クラスを使用し、要素を HTML DIV (前述のクラスを持つ DIV) に配置します。

これにより、全体的なレイアウト制御が向上するはずです。

で述べたように XHTML 1.0 strict での HTML テキストボックスとドロップダウンの幅が等しくない それはDoctypeにも依存します。XHTML 1.0 strict を使用すると、実際に幅の違いが現れることに気付きました。

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

最近では、ブートストラップを使用する場合、入力フィールドに単に form-control クラス。何かのようなもの：

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

次のCSSを使用することもできます。 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top